Я пробовал просить об этом раньше, но, судя по даун-голосам и непривычным комментариям, я не сделал свой вопрос достаточно ясным. Так что у меня будет еще один выстрел. С фотографиями и прочее.
У меня есть простая страница с четырьмя основными элементами: верхний колонтитул, нижний колонтитул и средний, все они содержатся в обертке. Обертка должна быть как минимум на 100% высоты экрана. Нижний колонтитул sticky- постоянно застрял в нижней части обертки. Заголовок всегда находится в том же положении.
Трудная часть - середина; Я хочу, чтобы он всегда охватывал полное пространство между верхним и нижним колонтитулом, но, при необходимости, также заставлял оболочку расширяться за пределы своей минимальной высоты.
Вот иллюстрация моего вопроса:
И jsfiddle.
Единственный метод, который я могу придумать, - использовать метод css calc, но он слишком ненадежный. Может ли кто-нибудь предложить лучший способ достичь этого, пожалуйста.
РЕДАКТИРОВАТЬ:
Зеленый, показанный на иллюстрации, - это средний div, а не обертка, показывающая. то есть. Мне особенно нужен средний div, чтобы всегда охватывать полный промежуток между верхним и нижним колонтитулом.
Основываясь на http://ryanfait.com/sticky-footer/, вы можете использовать
HTML:
<div id="wrapper">
<div id="header">
Header
</div>
<div id="middle">
Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle
</div>
<div id="push"></div>
</div>
<div id="footer">
Footer
</div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, #push {
height: 4em;
}
Если вы не хотите иметь семантически неправильный элемент #push
, вы можете использовать :after
(см. Http://css-tricks.com/snippets/css/sticky-footer/), но не будете работать в старых браузерах,
Если вам действительно нужен средний div, чтобы заполнить все пространство, вы можете использовать плавающие элементы:
HTML:
<div id="header">
Header
</div>
<div id="middle">
Middle begin<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle end
<div id="push"></div>
</div>
<div id="footer">
Footer
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#header {
float: left;
width: 100%;
}
#middle {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, #push {
height: 4em;
clear: both;
}
Демо: http://jsfiddle.net/C43ZJ/2/
Имейте в виду, что он не работает на IE7, потому что min-height: 100%
запускает hasLayout
, а затем #middle
очищает плавающий #header
(см. Как остановить #header
IE7 с помощью hasLayout).
div
? Тогда вы можете простоposition: absolute
верхний и нижний колонтитулы с серединой, имеющейmin-height: 100%
.