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

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

54 голосов
/ 16 октября 2008

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

Ответы [ 6 ]

33 голосов
/ 17 октября 2008

Подводя итог (и это из ссылки CSS Sticky Footer , предоставленной 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>
28 голосов
/ 28 июля 2016

решение 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;
}
8 голосов
/ 16 октября 2008

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

Полное объяснение и пример см. В разделе CSS Sticky Footer Райана Фейта .

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

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

1 голос
/ 03 июля 2018

Способ сделать это с помощью 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%;
}
0 голосов
/ 16 октября 2008 
#footer {
 clear: both;
}
0 голосов
/ 16 октября 2008

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

высота: 100%;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...