HTML divs: Авто высота и переполнение: авто?

Я пытаюсь создать сайт, который включает область содержимого с переполнением: авто и динамическую высоту. Желательно, чтобы я мог разместить верхний верх и нижний колонтитул ниже переполнения: auto div, и чтобы этот div занимал остальную часть пространства, но пока это оказалось трудным. Высота: авто не работает, и переполнение: auto требует высоты, поэтому я не могу просто не устанавливать его. Есть идеи? Мой код можно найти здесь: http://abbottconstruct.com/wp-content/themes/abbott/index.html HTML divs: Авто высота и переполнение: авто?

Спасибо всем, кому помогает.

источник

2010-09-13 Smartboy

что вы подразумеваете под динамической высоты? – Tgr

Вы пытаетесь сделать верхний и нижний колонтитулы видимыми во все времена, как приклеивались к экрану? Попробуйте зафиксировать позицию. Если вы просто хотите, чтобы нижний колонтитул находился в нижней части страницы, независимо от того, насколько высока область просмотра. Http://ryanfait.com/sticky-footer/ – Keyo

Для того чтобы получить высоту процента CSS, родитель элемента должен иметь определенную высоту. В результате мы можем сделать это с помощью следующей разметки:

<body>  
    <div id="content"> 
     <div id="header">Header</div> 
     <div id="text"> 
      Text content of your page 
     </div> 
    </div> 
    <div id="footer">Footer</div>  
</body>

Всех материалов сайта за исключением сноски содержится в #content элементе. Затем он использует объявление min-height: 100%, чтобы быть всегда не менее 100% от его родительской высоты. Поскольку его родительский элемент является телом и имеет объявление высоты, это работает так, как ожидалось.

Наконец нижний колонтитул представлен с отрицательным отрывом, а нижний нижний добавлен к элементу #text, поэтому его содержимое не случайно перекрывается.

CSS-выглядит следующим образом:

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#content { 
    min-height: 100%; 
    /* IE6 will need height: 100% defined in an IE6 only stylesheet */ 
} 

#header, #footer { 
    height: 100px; 
}  

/* Bring the footer into view */ 
#footer { 
    margin-top: -100px;  /* footer's height */ 
} 

/* Make sure footer doesn't overlap #text element */ 
#text { 
    padding-bottom: 100px; /* footer's height */ 
}

Вы можете увидеть его in action here. Если вы добавите больше текста наполнителя, вы увидите, что нижний колонтитул правильно сдвинут вниз.

источник

2010-09-13 00:56:38 Pat

Это не процентная высота, с которой у меня возникла проблема. Я хочу, чтобы содержимое div могло быть рассчитано на автоматическое заполнение пространства между двумя боковыми панелями и верхним и нижним колонтитулом. На моей странице вы можете увидеть, что div сдвинут вниз, где белые и боковые панели останавливаются, в то время как я хочу, чтобы он заканчивался в том же месте, что и они. Я попытался добавить прописку, но это не сработало, на самом деле это просто подтолкнуло белые и боковые панели дальше. Отрицательное заполнение ничего не делает, и не добавляет поля. Любые другие идеи? :) – Smartboy

С жидкими макетами, как это, я стараюсь создать действительно базовую таблицу (не так злобно, как говорят некоторые), потому что они выполняют такие автоматические вычисления, когда вам нужно определить высоту/ширину браузера и минус определенное значение для тебя.

Проверьте это и посмотрите, как вы идете.

http://lm-86.com/html_tests/liquid_header.html

Приветствия

Линдон

источник

2010-09-13 01:02:30

Вы пробовали давать ему процент на основе высоты и даже 'position:fixed' колонтитул? Проверьте это:

http://www.d2burke.com/dev/d2v6/autoheight.html

источник

2010-09-13 01:20:18 d2burke

Я должен согласиться с этим. Наличие полосы прокрутки в середине страницы не все, что полезно с точки зрения удобства использования. – Keyo