Возможно ли это сделать без JavaScript (html layout)

Страница имеет следующий макет:

<div id="main" style="min-height:500px;"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

Основной div может иметь фиксированную высоту или минимальную высоту (style="height:500px;" или style="min-height:375px;").

Возможно ли, чтобы нижний колонтитул и заголовок занимали столько же высоты, сколько им нужно, и позволяют содержимому брать остальные (content.height = main.height - (header.height + footer.height)) (без использования JavaScript, эластичный верхний и нижний колонтитулы, остальное содержимое)?

Ответ 1

Да, возможно < .

HTML:

<div id="main"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for #main min-height */
}

div#main {
    position: relative; /* needed for footer positioning */
    height: auto !important; /* real browsers */
    height: 500px; /* IE6: treated as min-height*/
    min-height: 500px; /* real browsers */
}

div#header {
    /* Will be as high as its content */
}

div#content {
    /* Will be displayed below #header regardless to its height */
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */
}

div#footer {
    position: absolute;
    width: 100%;
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */
    bottom: 0; /* stick to bottom */
}

На самом деле не устанавливайте высоту #content, как вы хотели, но отображает все так, как должно быть (#main ожидаемая высота, #footer находится внизу и не покрывает #content).

Ответ 2

Единственное решение, которое я нашел (не работает корректно в IE6/7)...

<table height="500" cellpadding="0" cellspacing="0" border="0">
    <tr height="1"><td>Header goes here</td></tr>
    <tr><td>Main content goes here</td></tr>
    <tr height="1"><td>Footer goes here</td></tr>
</table>

Ключевым моментом является установка малой высоты для верхних и нижних строк и не установка высоты для средней строки. Это побуждает браузер держать верхние и нижние ряды как можно меньше и использовать средний ряд для захвата любого неиспользуемого пространства. Но IE6/7 игнорирует это и пытается равномерно распределить неиспользуемое пространство во всех трех строках.

Тем не менее, это может быть самым близким, которое вы можете получить без использования JavaScript (или добавления определенного CSS-выражения IE (т.е. динамического свойства), которое я бы не рекомендовал).

HTML-таблицы - это единственный вариант, который предлагает меру контроля над вертикальной компоновкой (размер и выравнивание) без использования JavaScript. Если это то, что вам нужно, HTML-таблица - это путь. Но вам может быть лучше оставаться в пределах ограничений макетов на основе CSS.

Ответ 3

Для использования просто нижнего колонтитула CSS требуется фиксированный размер.