Как создать div, чтобы заполнить все пространство между верхним и нижним колонтитулами div

StackOverflow https://stackoverflow.com/questions/206652

  •  03-07-2019
  •  | 
  •  

Вопрос

Я работаю над переходом от использования таблиц для целей верстки к использованию divs (да, да, великая дискуссия).У меня есть 3 раздела, верхний, контентный и нижний колонтитулы.Размер верхнего и нижнего колонтитулов составляет 50 пикселей каждый.Как мне сделать так, чтобы нижний колонтитул div оставался внизу страницы, а содержимое div заполняло пространство между ними?Я не хочу жестко кодировать высоту содержимого divs, потому что разрешение экрана может измениться.

Это было полезно?

Решение

Решение Flexbox

Используя гибкую компоновку, мы можем достичь этого, обеспечивая естественную высоту верхнего и нижнего колонтитулов.Верхний и нижний колонтитулы будут располагаться в верхней и нижней части области просмотра соответственно (очень похоже на родное мобильное приложение), а оставшееся пространство будет заполнено областью основного содержимого, в то время как любое вертикальное переполнение будет прокручиваться внутри этой области.

Смотрите JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Другие советы

Подводя итог (и это пришло из CSS Липкий Нижний колонтитул ссылка предоставлена Traingamer), это то, что я использовал:

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Чтобы подробнее ознакомиться с ответом Митчелла Селлерса, укажите высоту вашего раздела контента:100% и дайте ему автоматическую маржу.

Полное объяснение и пример см. В книге Райана Фейта CSS Липкий Нижний колонтитул.

Поскольку вы знаете размер (высоту) вашего заголовка, поместите его в раздел содержимого (или используйте поля).

Абсолютная позиция вызовет у вас проблемы, если ваш контент больше (выше), чем окно.

Способ сделать это с помощью CSS Grid:

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

если вы пытаетесь максимизировать высоту вашего содержимого div, в CSS добавьте

высота:100%;

#footer {
 clear: both;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top