Question

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

Answer 1

此版本适用于所有最新版本的浏览器，如果你有现代化脚本（如果不只是将header和footer更改为div），则可以使用ie8：

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

Answer 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网站。

Answer 3

当我试图找到这个问题的答案时，这仍然是谷歌的最高结果。我不必在我的项目中支持旧浏览器，我觉得我在flex-box中找到了更好，更简单的解决方案。下面的CSS片段就是必要的。

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

stdbool.h

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  min-height: 60px;
}
main {
  flex-grow: 1;
  overflow: auto;
}
footer {
  min-height: 30px;
}

Answer 4

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

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

Answer 5

您可以利用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。

Answer 6

尝试计算页眉和页脚是不好的:(设计应该简单，自我解释。简单易行。计算只是......不容易。人类不容易，机器上有点难。

您正在寻找的是Holy Grail design的一部分。

Here是使用flex显示的实现。除了页脚和标题之外，它还包括侧栏。享受：

DatabaseConfig

Answer 7

这个问题得到了很好的回答，但我冒昧地添加了一个javascript解决方案。只需提供您要“扩展”ID footerspacerdiv的元素，此javascript代码段将展开该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>

Answer 8

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

<强>解释

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

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

我们使用课程fit-to-parent和min-fit-to-parent来填充页面内容。这给了我们一个粘性页脚，它至少与窗口一样低，但如果内容比窗口长，则会隐藏。

在页眉和页脚中，我们使用display: table和display: table-cell样式为页眉和页脚提供一些垂直填充，而不会破坏页面的收缩包装质量。（为它们提供真正的填充可能会导致页面的总高度超过100%，这会导致滚动条在不需要时显示。）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

得到div占据100％的身高，减去固定高度的页眉和页脚

8 个答案: