Question

我正在尝试创建一个占用页面高度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>

编辑：我确实尝试了一个margin-top：-50px，填充顶部：之前内容div为50px。但是它的行为与我的预期不同，因为即使我设置了z-index，内容也会与标题重叠。

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

Answer 2

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

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

您可能必须使用％'来修复...

编辑：我使用Firefox 6来测试它，BTW。您也可以使用小数（例如95.6%

）获得确切的百分比

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

2 个答案: