Современный способ разметки компоновки высот 100% в HTML5 и CSS3
Я уже давно не занимаюсь разметкой сайтов. Итак, теперь у нас есть 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. Я знаю, что это значит. Проблема теперь в том, как я могу сказать, что нижний колонтитул остается внизу, даже когда контент пуст или короток. Когда контент достаточно длинный, нижний колонтитул просто падает, как в противном случае. Абсолютный и фиксированный не является решением (по крайней мере, в его базовой форме)
НЕКОТОРЫЕ РЕЗЮМЕ ОБНОВЛЕНИЯ
Некоторое разочарование, хотя я чувствую: первый метод - это только те таблицы, но без тега table. Второй действительно старый, я избегал его использовать, потому что он похож на хак. Мой бог, ничего нового:)
Ответы
Ответ 1
Ну, в первую очередь, в 2011 году мы больше не используем таблицы для макета!
Если бы я был вами, я бы написал разметку следующим образом:
<body>
<div id="main" role="main">
<header>
contains logo, nav and has fixed height
</header>
<div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
actual content
</div>
<footer>
fixed size footer
</footer>
</div>
</body>
И CSS будет тем же, кроме измененных селекторов
html, body { height:100% }
#main { height:100% }
footer { height:123px }
Для фиксированного нижнего колонтитула я бы предложил использовать position:absolute или, может быть, position:fixed - это зависит от того, как вы хотите, чтобы он себя вел (прокрутите страницу или всегда оставайтесь внизу).
Чтобы сделать "липкий" нижний колонтитул, который будет внизу страницы, но перемещаться с содержимым, этот метод будет выполнять трюк.
Ответ 2
В 2013 году по-прежнему ничего не сравнится с достойной таблицей, которая имеет соответственно thead/tfoot/tbody.
Ниже (действительная страница HTML5) есть фиксированный верхний и нижний колонтитулы, высота 100% и НЕ ЛЮБЫЕ проблемы с изменением размера.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">
html, body, table { height: 100% }
th { height: 80px }
#f { height: 40px }
table { width: 1000px }
html, body { margin: 0 }
table { margin: 0 auto }
td { text-align: left }
html, body { text-align: center } /* important for old browsers */
th { text-align: right }
html, body { background-color: rgb(148,0,211) }
#m { background-color: #f39 }
#m { -webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px; }
</style>
<table>
<thead><tr><th> head</th></tr></thead>
<tfoot><tr><td id="f">foot</td></tr></tfoot>
<tbody><tr><td id="m">main</td></tr></tbody>
</table>
Ответ 3
Сегодня вы бы сделали это (не так уж и много)
http://jsfiddle.net/5YHX7/3/
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
и
<html><body><div></div></body></html>
Ответ 4
Технически вы, вероятно, могли бы уйти с составлением страницы с табличными тегами, но теперь это считается плохой практикой. Считается хорошей практикой использовать "семантическую" веб-разметку, что означает использование тегов по назначению, поэтому тег таблицы должен использоваться для представления данных таблицы, а не для невидимого дизайна. DIV предназначены для использования при проектировании вашего невидимого макета страницы. Разделительный список - отличный веб-ресурс для понимания этих концепций.
Эта статья хороша для понимания семантической разметки: http://www.alistapart.com/articles/12lessonsCSSandstandards
Итак, все, что сказано, вот примерная страница, которая делает то, что вы хотите:
http://peterned.home.xs4all.nl/examples/csslayout1.html
Ответ 5
Как вы просили "современных"... anno 2016 У меня может быть лучший ответ, чем в 2013 году:
используйте решение 100vh в CSS3. vh - новый блок и обозначает высоту ViewPort.
html, body { height: 100% }
header { height: 100px }
footer { height: 50px }
main { height: calc(100vh - 150px); }
html, body { width: 100% }
header, main, footer { width: 1000px }
html, body { margin: 0 }
header, main, footer { margin: 0 auto }
html, body { padding: 0 }
html, body { text-align: center }
body { background-color: white }
header { background-color: yellow }
main { background-color: orange }
footer { background-color: red }
<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>
Ответ 6
Позвольте мне добавить свой вклад, добавив 3 столбца в макет заголовка/основного/нижнего колонтитула:
http://jsfiddle.net/ESrG9/
<!DOCTYPE html>
<table>
<thead>
<tr id="header">
<th colspan="3">head</th>
</tr>
</thead>
<tbody>
<tr>
<td id="left">main</td>
<td id="main">main</td>
<td id="right">main</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="footer" colspan="3">foot</td>
</tr>
</tfoot>
</table>
Ответ 7
Пока никто не упомянул метод flex-box
https://jsfiddle.net/55r7n9or/
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div {
height: 100%;
margin: 0;
padding: 0 }
div { display: flex;
flex-direction: column }
main { flex: 1 }
header { background: red }
main { background: pink }
footer { background: purple }
</style>
</head>
<body>
<div>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</div>
</body>
</html>
Ответ 8
Поскольку запрос "современного" и "совместимого" в любом случае является сокращением, метод сетки не упоминался до сих пор и, возможно, сейчас слишком современен, но с некоторыми адаптациями может быть решение.
Эта статья (и указатели) - с более сложным использованием - замечательна для чтения:
https://developers.google.com/web/updates/2017/01/css-grid
Теперь код выглядит хорошо, однако браузеры не... - поэтому я добавил некоторые форсировки.
https://jsfiddle.net/qLcjg6L6/1/
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
min-height: 100vh;
margin: 0;
padding: 0 }
body { display: grid;
grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
grid-template-columns: 100% }
header { background: red }
main { background: pink }
footer { background: purple }
/* as this code is yet far from well-supported, here a brute force... */
header { height: 70px }
footer { height: 60px }
main { height: calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */
</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>
