100%-я Минимальная Высота расположение CSS
Контейнеры сохраняют объекты . Ссылки не являются объектами.
В спецификации C ++ 11 четко указано (§23.2.1 [container.requirements.general] / 1):
Контейнеры - это объекты, которые хранить другие объекты.
5 ответов
ответ kleolb02 выглядит довольно хорошим. иначе была бы комбинация липкий нижний колонтитул и взлом минимальной высоты
Я использую следующий: CSS Расположение - 100% высотой
Минимальная высота
#container элемент этой страницы имеет минимальную высоту 100%. Тот путь, если содержание требует большей высоты, чем область просмотра, обеспечивает, высота #content вынуждает #container стать более длинным также. Возможные столбцы в #content могут тогда визуализироваться с фоновым изображением на #container; отделения не являются ячейками таблицы, и Вы не нуждаетесь (или хотите), физические элементы для создания такого визуального эффекта. Если Вы еще не убеждены; думайте шаткие строки и градиенты вместо прямых линий и простых цветовых схем.
Родственник, располагающий
, поскольку #container имеет относительное положение, #footer будет всегда оставаться в его нижней части; так как упомянутая выше минимальная высота не препятствует тому, чтобы #container масштабировался, это будет работать, даже если (или скорее особенно, когда) #content вынудит #container стать более длинным.
Дополнительная нижняя часть
, Так как это больше не находится в нормальном потоке, дополнительная нижняя часть #content теперь обеспечивает пространство для абсолютного #footer. Это дополнение включено в прокрученную высоту по умолчанию, так, чтобы нижний колонтитул никогда не перекрывал вышеупомянутое содержание.
Масштаб размер текста немного или изменяют размеры Вашего окна браузера для тестирования этого расположения.
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
Хорошо работает для меня.
Чистое CSS решение (#content { min-height: 100%; }) будет работать в большом количестве случаев, но не во всех них - особенно IE6 и IE7.
, К сожалению, необходимо будет обратиться к решению JavaScript для получения желаемого поведения. Это может быть сделано путем вычисления желаемой высоты для содержания <div> и установки его как свойства CSS в функции:
function resizeContent() {
var contentDiv = document.getElementById('content');
var headerDiv = document.getElementById('header');
// This may need to be done differently on IE than FF, but you get the idea.
var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
contentDiv.style.height =
Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}
можно тогда установить эту функцию как обработчик для onLoad и onResize события:
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
Вы можете попробовать следующее: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Это 100% высота и горизонтальный центр.
Попробуйте следующее:
body{ height: 100%; }
#content {
min-height: 500px;
height: 100%;
}
#footer {
height: 100px;
clear: both !important;
}
Элемент div ниже div содержимого должен иметь очистить: оба .