让div占据100％的身体高度，减去固定高度的页眉和页脚[重复]答案

【问题标题】：Get div to take up 100% body height, minus fixed-height header and footer [duplicate]让div占据100％的身体高度，减去固定高度的页眉和页脚[重复]
【发布时间】：2013-02-22 10:07:50
【问题描述】：

根据我的研究，这似乎是一个绝对经典的 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，并且答案是跨浏览器的防弹。

【问题讨论】：

如果#content 大于视口，您希望发生什么？是要下推页脚还是要滚动内容？
我想把页脚往下推，谢谢。
当你说跨浏览器时，是所有最新的浏览器还是它也必须适用于旧版本的ie
IE8 是必须的。 IE7 及更早版本不支持。
添加了一个兼容所有新浏览器和ie8的答案

标签： css

【解决方案1】：

如果你有modernizr脚本，这个版本可以在所有最新的浏览器和ie8中运行（如果不只是将header和footer更改为divs）：

Fiddle

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>

随内容滚动：Fiddle

【讨论】：

因为这个答案似乎受到了很多打击，我想我也应该给a link to this answer as it has some alternatives
运行 jsfiddle 演示会使页眉和页脚滚动。从问题中，我了解到即使内容可滚动，也需要显示页眉/页脚。
@AlikElzin-kilaka 你也读过 cmets 吗？我问了导致我得到这个答案的问题，这个答案在 2 年前就被接受了
@AlikElzin-kilaka 除了这个问题太老了，它已经过时了，我现在会使用 display flex，因为现在所有主要浏览器都支持它，当这个已回答，flex 的支持非常有限
绝对不是 2 年前的回答事件......当必须滚动内容时，固定 div 滚动的意义何在。

【解决方案2】：

只要它不是跨浏览器解决方案，您可能会利用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;
}

Example at JsFiddle

如果您想了解更多关于calc(expression) 的信息，最好访问this 网站。

【讨论】：

我只想提一下这个解决方案。当使用带有高度的 calc 时，它将是页面加载时该元素的计算高度。如果您的内容容器因加载一些动态内容而扩展，则溢出将可见，这很好，但如果您想在#content 元素上设置背景颜色，请将其设为 min-height 而不是 height 以便它始终展开内容正确。

【解决方案3】：

当我试图找到这个问题的答案时，这仍然是谷歌搜索结果中的佼佼者。我不必在我的项目中支持旧版浏览器，我觉得我在flex-box 中找到了更好、更简单的解决方案。下面的 CSS sn-p 就足够了。

我还展示了如果屏幕高度太小，如何使主要内容可滚动。

html,
body {
  height: 100%;
  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>

【讨论】：

哦，是的，好像“flex”、“flex-grow”和“flex-direction”——打开一个充满行为的整个黑盒子的名称——比简单的垂直更清晰抵消。我会坚持负边距。
@Triynko，我同意使用负边距是一个很好的解决方案，但它不符合我的需求。我提供的解决方案的优点是始终在页面上显示页眉和页脚，其余内容填满屏幕并可滚动。
这是未来的方法。也不需要知道页眉/页脚的确切高度。现在可以使用百分比。
目前大部分浏览器都支持flex。我想我会选择这个解决方案。由于响应能力强，这似乎是最好的解决方案
@John，如果不能看到你拥有的东西，就很难确定。对于没有按预期调整大小的 flexbox 元素，我会检查 flex-basis、flex-grow 和 flex-shrink 属性——或者只是 flex，它可以包含所有 3 个属性——在不是预期大小的子元素上，在这种情况下你的主要。我在上面包含了这个，但我会在这里再次包含它，CSS-Tricks 的 Flexbox 完整指南是天赐之物。 css-tricks.com/snippets/css/a-guide-to-flexbox 还是有问题？在 Codepen 中重新创建最低限度并发布链接。 codepen.io/pen

【解决方案4】：

新的现代方法是通过从视口的垂直高度中减去页眉和页脚的高度来计算垂直高度。

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

【讨论】：

兼容 IE 9 以上。什么是 vh？
伟大而简单的解决方案（使用 calc）。我还要指出，除了 vh 和 vw 之外，calc 还可以使用 % 值。

【解决方案5】：

试图计算页眉和页脚是不好的 :( 设计应该简单，不言自明。简单明了。计算只是......不容易。对人类来说不容易，对机器来说有点困难。

您要查找的是Holy Grail design 的子集。

Here 是一个使用弹性显示的实现。除了页脚和页眉之外，它还包括侧栏。享受：

<!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.5年后，希望现在的要求允许IE10：caniuse.com/#feat=flexbox

【解决方案6】：

您可以利用 css 属性 Box Sizing。

#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。

【讨论】：

谢谢，但这不适用于大量正文内容：jsfiddle.net/8Hqm5/1 我认为@Pete 的解决方案更适合处理正文内容大小未知的情况。

【解决方案7】：

这个问题已经得到了很好的回答，但我冒昧地添加了一个 javascript 解决方案。只需将要“扩展”的元素指定为 id footerspacerdiv，此 javascript sn-p 将扩展该 div，直到页面占据浏览器窗口的整个高度。

它的工作原理是，当页面小于浏览器窗口的全高时，document.body.scrollHeight 等于 document.body.clientHeight。 while 循环增加footerspacerdiv 的高度，直到 document.body.scrollHeight 大于 document.body.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>

【讨论】：

【解决方案8】：

这是一个不使用负边距或calc 的解决方案。运行下面的sn-p查看最终结果。

说明

我们给页眉和页脚一个固定的高度30px 并将它们分别绝对定位在顶部和底部。为了防止内容掉到下面，我们使用了两个类：below-header 和 above-footer 用30px 填充上面和下面的 div。

所有内容都包含在position: relative div 中，因此页眉和页脚位于内容的顶部/底部，而不是窗口。

我们使用fit-to-parent 和min-fit-to-parent 类来使内容填满页面。这为我们提供了一个至少与窗口一样低的粘性页脚，但如果内容比窗口长则隐藏。

在页眉和页脚中，我们使用display: table 和display: table-cell 样式为页眉和页脚提供一些垂直填充，而不会破坏页面的收缩包装质量。（给他们真正的填充可能会导致页面的总高度超过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>

【讨论】：