CSS - высота 100% минуС#px - верхний и нижний колонтитулы

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

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

Как верхний, так и нижний колонтитулы имеют фиксированную высоту. Скажем, например, что обе имеют высоту 20 пикселей. Мне нужно установить высоту содержимого на 100% минус 40 пикселей (высота заголовка + нижнего колонтитула). Я знаю, что могу легко это сделать с помощью JavaScript, но было бы здорово узнать, как это сделать с помощью простого CSS, если это возможно.

Ответ 1

#header /* hypothetical name */
{
    height:100%;
}

#header p /* or any other tag */
{
    margin:20px 0 20px 0;
}

Просто не забудьте указать маржу и высоту в одном и том же теге. Вы испытаете некоторые сумасшедшие результаты.

Ответ 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, из-за других событий на моей веб-странице.

http://www.xs4all.nl/~peterned/examples/csslayout1.html