Я уже давно не занимаюсь разметкой сайтов. Итак, теперь у нас есть HTML5 и множество новых функций в CSS. У меня общий макет сайта с заголовком и нижним колонтитулом фиксированного размера. И, конечно, основная область контента между ними. По умолчанию страница должна занимать 100% высоты окна (т.е. Область содержимого расширяется). И если контент длинный, вертикальная полоса прокрутки появляется и все как обычно. Обычно я делал это примерно так:
<body>
<table id="main" ...>
<tr>
<td id="header-and-content">
<div id="header">contains logo, nav and has fixed height</div>
<div id="content">actual content</div>
</td>
</tr>
<tr>
<td id="footer">
fixed size footer
</td>
</tr>
</table>
</body>
И сопровождающий css:
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
Итак, это устарело. Вы, кто держится в курсе новых технологий разметки, как это делается к 2011 году?
UPD Люди, не связанные с семантической разметкой или использованием div. Я знаю, что это значит. Проблема теперь в том, как я могу сказать, что нижний колонтитул остается внизу, даже когда контент пуст или короток. Когда контент достаточно длинный, нижний колонтитул просто падает, как в противном случае. Абсолютный и фиксированный не является решением (по крайней мере, в его базовой форме)
НЕКОТОРЫЕ РЕЗЮМЕ ОБНОВЛЕНИЯ
- Я пробовал метод с использованием display: table и display: table-row, и он работает: немного контента, больше контента
- Метод Подчеркнул Footer Stick на нижней части страницы. Он также работает: немного контента, больше контента
Некоторое разочарование, хотя я чувствую: первый метод - это только те таблицы, но без тега table. Второй действительно старый, я избегал его использовать, потому что он похож на хак. Мой бог, ничего нового:)
