Получить div, чтобы занять 100% высоты тела, минус фиксированной высоты верхнего и нижнего колонтитулов [дубликат]

этот вопрос уже есть ответ здесь:

  • CSS Одностолбцовый макет центрированный фиксированная ширина 100% высота W верхний и Нижний колонтитулы 5 ответов

из моих исследований это кажется абсолютно классическим вопросом CSS, но я не могу найти окончательного ответа - так что StackOverflow это.

Как настроить div контента, чтобы занять 100% высоты тела, минус высота, занимаемая верхним и нижним колонтитулами фиксированной высоты?

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>

//CSS
html, body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height, minus header & footer
}

Я хотел бы использовать чистый CSS, и для ответа, чтобы быть пуленепробиваемым через браузеры.

8 71
css

8 ответов:

эта версия будет работать во всех последних браузерах и ie8, если у вас есть сценарий modernizr (если не просто изменить header и footer на div s):

Скрипка

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

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}
<div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div>

прокрутка содержания: Скрипка

55

поскольку это не кросс-браузерное решение, вы можете воспользоваться преимуществами использования calc(expression) чтобы достичь этого.

html, body { 
 height: 100%;
}
header {        
 height: 50px;
 background-color: tomato
}

#content { 
 height: -moz-calc(100% - 100px); /* Firefox */
 height: -webkit-calc(100% - 100px); /* Chrome, Safari */
 height: calc(100% - 100px); /* IE9+ and future browsers */
 background-color: yellow 
}
footer { 
 height: 50px;
 background-color: grey;
}

пример в JsFiddle

Если вы хотите узнать больше о calc(expression) вам лучше посетить этой сайт.

37

Это все еще появилось как лучший результат Google, когда я пытался найти ответ на этот вопрос. Мне не нужно было поддерживать старые браузеры в моем проекте, и я чувствую, что нашел лучшее, более простое решение в flex-box. Следующий фрагмент CSS-это все, что необходимо.

Я также показал, как сделать основной контент прокручиваемым, если высота экрана слишком мала.

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  min-height: 60px;
}
main {
  flex-grow: 1;
  overflow: auto;
}
footer {
  min-height: 30px;
}
<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
  <header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
  <main style="overflow: auto; background-color: lightgrey; padding: 2px;">
    <article style="height: 400px;">
      Goodbye
    </article>
  </main>
  <footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>
17

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

//CSS
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: calc(100vh - 50px - 50px);
}
11

попытка вычислить верхний и Нижний колонтитулы плоха: (дизайн должен быть простым, самоочевидным. Просто легко. Расчеты справедливы...не легкий. Не легко для человека и немного трудно на машинах.

то, что вы ищете является подмножеством Святой Грааль конструкция.

здесь's реализация с помощью гибкого дисплея. Он включает в себя боковые панели в дополнение к нижнему колонтитулу и заголовку. Наслаждайтесь:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>
2

вы можете взять advatange свойства css Размер Коробки.

#content { 
    height: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding-top: 50px;
    margin-top: -50px;
    padding-bottom: 50px;
    margin-bottom: -50px;
}

посмотреть JsFiddle.

1

на этот вопрос был довольно хорошо дан ответ, но я беру на себя смелость добавить решение javascript. Просто дайте элемент, который вы хотите "развернуть" идентификатор footerspacerdiv, и этот фрагмент javascript будет расширять этот div, пока страница не займет всю высоту окна браузера.

он работает на основе наблюдения, что, когда страница меньше, чем полная высота окна браузера, документ.тело.scrollHeight равен document.тело.clientHeight. Время петля увеличивает высоту footerspacerdiv пока документ.тело.scrollHeight больше, чем документ.тело.clientHeight. В этот момент footerspacerdiv на самом деле будет на 1 пиксель выше, и браузер покажет вертикальную полосу прокрутки. Итак, последняя строка скрипта уменьшает высоту footerspacerdiv на один пиксель, чтобы высота страницы точно соответствовала высоте окна браузера.

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

<script>    
//expand footerspacer div so that footer goes to bottom of page on short pages        
  var objSpacerDiv=document.getElementById('footerspacer');          
  var bresize=0;   

  while(document.body.scrollHeight<=document.body.clientHeight) {
    objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
    bresize=1;
  }             
  if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }               
 </script>
0

вот решение, которое не использует отрицательные поля или calc. Запустите фрагмент ниже, чтобы увидеть окончательный результат.

объяснение

мы даем верхний и Нижний колонтитулы фиксированной высоты 30px и расположите их абсолютно сверху и снизу, соответственно. Чтобы предотвратить попадание содержимого под него, мы используем два класса:below-header и above-footer для заполнения div выше и ниже с 30px.

все содержимое завернутый в position: relative div, чтобы верхний и Нижний колонтитулы находятся в верхней/нижней части контент, а не в окно.

мы используем классы fit-to-parent и min-fit-to-parent чтобы содержимое заполнило страницу. Это дает нам липкий нижний колонтитул, который по крайней мере так же низок, как окно, но скрыт, если содержимое длиннее окна.

внутри верхнего и нижнего колонтитулов мы используем display: table и display: table-cell стили, чтобы дать header и footer некоторые вертикальные отступы без нарушения качества термоусадочной пленки страницы. (Предоставление им реального заполнения может привести к тому, что общая высота страницы будет больше, чем 100%, что приводит к появлению полосы прокрутки, когда она действительно не нужна.)

.fit-parent {
    height: 100%;
    margin: 0;
    padding: 0;
}
.min-fit-parent {
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.below-header {
    padding-top: 30px;
}
.above-footer {
    padding-bottom: 30px;
}
.header {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
}

/* helper classes */

.padding-lr-small {
    padding: 0 5px;
}
.relative {
    position: relative;
}
.auto-scroll {
  overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
    display: table;
}
.valign-inner {
    display: table-cell;
    vertical-align: middle;
}
<html class='fit-parent'>
  <body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
        <div class='valign-inner padding-lr-small'>
            My webpage
        </div>
    </div>
    <div class='fit-parent above-footer below-header'>
        <div class='fit-parent' id='main-inner'>
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
        </div>
    </div>
    <div class='footer valign-outer' style='background-color: white'>
        <div class='valign-inner padding-lr-small'>
            &copy; 2005 Old Web Design
        </div>
    </div>
</div>
    </body>
  </html>
0