Ответ 1
#header /* hypothetical name */
{
height:100%;
}
#header p /* or any other tag */
{
margin:20px 0 20px 0;
}
Просто не забудьте указать маржу и высоту в одном и том же теге. Вы испытаете некоторые сумасшедшие результаты.
CSS - высота 100% минуС#px - верхний и нижний колонтитулы
Соответствующая веб-страница выглядит следующим образом:
// The Header //
/* */
/* CONTENT */
/* */
// The footer //
Как верхний, так и нижний колонтитулы имеют фиксированную высоту. Скажем, например, что обе имеют высоту 20 пикселей. Мне нужно установить высоту содержимого на 100% минус 40 пикселей (высота заголовка + нижнего колонтитула). Я знаю, что могу легко это сделать с помощью JavaScript, но было бы здорово узнать, как это сделать с помощью простого CSS, если это возможно.
Ответы
Ответ 2
Если ваш браузер поддерживает CSS3, попробуйте использовать элемент CSS Calc()
height: calc(100% - 65px);
вы также можете добавить параметры совместимости браузера:
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
Ответ 3
Поместите фиксированную позицию в верхний и нижний колонтитулы и установите их в верхнюю часть нижней части окна соответственно. Затем поместите верхнюю и нижнюю прописные части в область содержимого 20px.
#header{position:fixed;top:0}
#footer{position:fixed;bottom:0}
#content{padding:20px 0}
Ответ 4
Ответ Marnix предполагает использование верхнего и нижнего заполнения элемента контента; моя включает использование верхней и нижней границы.
Я наткнулся на это решение самостоятельно, пытаясь понять, как сделать что-то подобное, не прибегая к таблицам: сделайте центральную высоту элемента 100%, но затем установите модель размера окна в "border-box" (так что высота включает не только содержимое в поле, но и границы вокруг окна), сделайте верхнюю и нижнюю границы толстыми (например, 20px), затем используйте фиксированное позиционирование, чтобы наложить верхний и нижний колонтитулы на сумасшедший, толстые верхние и нижние границы центрального элемента.
Вот мой пример CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the
box border, not just the content */
border: 0;
border-top: 20px solid white;
border-bottom: 20px solid white;
/* Leave some space for the header and footer to
overlay. */
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
height: 20px;
background-color: #eee;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
Это работает в Google Chrome 24 для Mac. Однако я не пробовал это в других браузерах.
Надеюсь, это поможет кому-то еще, кто все еще сталкивается с соблазном просто использовать таблицу и сделать макет страницы уже выполненным.: -)
Ответ 5
В этом примере показан наиболее надежный способ сделать это. На самом деле, это немного некорректно в IE, потому что изменение размера иногда происходит неправильно. А именно, когда вы делаете изменение размера из нижнего правого угла и просто выполняете вертикальное изменение размера вручную (довольно сложно сделать иногда), страница не будет обновляться в IE. У меня была такая же проблема с этим, и я просто исправил его с помощью JS, из-за других событий на моей веб-странице.