如何让内容 div 跨越页面的剩余高度而不滚动？答案

【问题标题】：How to have a content div span the remainder height of a page without scroll?如何让内容 div 跨越页面的剩余高度而不滚动？
【发布时间】：2011-09-07 08:53:47
【问题描述】：

我正在尝试创建一个占页面高度 100% 的页面，但不显示滚动条。但是，我想在上面添加一个标题，当我这样做时，由于额外的高度会出现一个滚动条。我尝试用负的底部边距来补偿额外的长度，但这似乎并没有改变长度。如何防止滚动条出现在此布局中？

这是我的代码：

<html>
<head>
  <style type="text/css">
  * { 
    margin: 0;
    padding: 0;
  }
  body {
    background-color: orange;
  }
  div#header {
    background-color: red;
    height: 50px;
  }
  div#content {
    background-color: yellow;
    height: 100%;
    margin-bottom: -50px;
  }
  </style>
</head>

<body>
  <div id="header">
    HEADER
  </div>
  <div id="content">
    Test Content
  </div>
</body>
</html>

编辑：我之前确实在内容 div 上尝试了 margin-top: -50px 和 padding-top: 50px 。但是它的行为并不像我预期的那样，因为即使我设置了 z-index，内容也会与标题重叠。

【问题讨论】：

内容 div 根本没有被拉伸，至少在 Chrome 中没有。您正在使用哪些浏览器？
根据您的申请，您可以在正文中添加overflow: hidden。
您是否尝试将设置为 100% 并为您的标题和内容分配一个百分比高度？
@sdleihssirhc 对于我来说，内容 div 一直延伸到页面底部，我使用的是 OSX 上的 Chrome 13.0。
@ngen 我需要滚动但是如果内容 div 比高度长。

标签： html layout css

【解决方案1】：

这是另一种方式

http://jsfiddle.net/b27e8/

  * { 
    margin: 0;
    padding: 0;
  }
  body {
    background-color: orange;
  }
  div#header {
    background-color: red;
    height: 50px;
  }
  div#content {
    background-color: yellow;
    top:50px;
    bottom:0px;
    width:100%;
    position:absolute;
  }

【讨论】：

【解决方案2】：

我使用以下方法解决了您的问题：

div#header {
background-color: red;
height: 10%;  }
div#content {
background-color: yellow;
height: 90%;
margin-bottom: -50px;   }

您可能必须使用 % 来解决此问题...

编辑：我使用 Firefox 6 进行测试，顺便说一句。您也可以使用小数获得准确的百分比（例如，95.6%

【讨论】：

我不希望标题是流动高度，我希望它是固定高度，并根据浏览器长度让内容填充页面的其余部分。跨度>
哦，我明白了……对不起！
你能用javascript吗？使用window.screen.availHeight，然后减去您的标题高度，您可以将内容设置为该高度..？还是 javascript 是禁区？
我可以，但感觉有点hacky，因为似乎应该有一个干净的css解决方案。但如果我无法弄清楚，我可能不得不求助于它，不过我会记住它。