Современный способ разметки макета 100% высоты в HTML5 и CSS3 - PullRequest
Новая
       0

Современный способ разметки макета 100% высоты в HTML5 и CSS3

21 голосов
/ 24 ноября 2011

Я уже давно не размечаю сайты. Итак, теперь у нас есть 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. Я знаю, что это значит. Проблема сейчас в - как мне сказать, чтобы нижний колонтитул оставался внизу, даже если содержимое пустое или короткое. Когда содержание достаточно длинное, нижний колонтитул просто идет вниз, как это было бы в другом случае. Абсолютное и фиксированное не является решением (по крайней мере, в его базовой форме)

НЕКОТОРЫЕ ОБЩЕЕ ОБНОВЛЕНИЕ

  1. Я пробовал метод с использованием display: table и display: table-row, и он работает: мало контента , больше контента
  2. Метод Сделать нижний колонтитул в нижней части страницы по совету Андрея. Работает также: немного контента , больше контента

Некоторое разочарование, хотя я чувствую: первый метод - это только те таблицы, но без тега table. Второй действительно старый, я избегал его использовать, потому что он напоминает хак. Боже мой, ничего нового:)

Ответы [ 8 ]

12 голосов
/ 24 ноября 2011

Ну, во-первых, в 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 - это зависит от того, как вы хотите, чтобы он вел себя (прокрутите страницу или всегда оставайтесь внизу).

Чтобы создать «липкий» нижний колонтитул, который будет находиться внизу страницы, но будет перемещаться вместе с содержимым, этот метод поможет.

6 голосов
/ 23 марта 2013

В 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>
2 голосов
/ 23 июня 2016

Как вы и просили "современный" ... год 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>

Но если вы хотите быть совместимым со старыми браузерами, используйте код в моем ответе 2013 года.

1 голос
/ 29 ноября 2017

Поскольку запрос «современный» и «совместимый» в любом случае является сокращением, метод сетки до сих пор не упоминался и, возможно, слишком современен, но с некоторыми адаптациями может быть решением.

Эта статья (и указатели) - с более сложным использованием - отлично подходит для чтения: 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's 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>
1 голос
/ 24 ноября 2011

Технически вы, вероятно, все еще могли бы уйти с разметки своей страницы с помощью табличных тегов, но теперь это считается плохой практикой. Хорошей практикой считается использование «семантической» веб-разметки, которая означает использование тегов для их предполагаемых целей, поэтому для представления данных таблицы следует использовать табличный тег, а не невидимый дизайн. DIVs предназначены для разработки вашего невидимого макета страницы. Отдельный список - отличный ресурс для понимания этих концепций.

Эта статья хороша для понимания семантической разметки: http://www.alistapart.com/articles/12lessonsCSSandstandards

Итак, все, что сказано, вот пример страницы, которая делает то, что вы хотите:

http://peterned.home.xs4all.nl/examples/csslayout1.html

1 голос
/ 24 ноября 2011

Сегодня вы бы поступили так (на самом деле мало чем отличаются)

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>
0 голосов
/ 29 ноября 2017

Пока никто не упомянул метод 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>
0 голосов
/ 22 июля 2014

Позвольте мне добавить свой вклад, добавив 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...