1

参考这个问题和接受的答案，我尝试做类似的事情。

.Content
{
 position:absolute;
 top:0;
 left:0;
 padding-top:75px;
 width:inherit;
 height:inherit;
}

.Header
{
 position:absolute;
 top:0;
 left:0;
 height:75px;
 width:inherit;
 background-color:Blue;
 text-align:center;
}

<form id="form1" runat="server" style="width:100%;height:100%">
 <div id="Content" class="Content">
  <div id="Header" class="Header">
   <h1 style="color:White">Report Portal</h1>
  </div>
 </div>
</form>

我希望内容区域填满整个页面，仅此而已。但是带有上述 html 的网页会出现垂直滚动条。我该如何纠正？

4

3 回答 3

2

您不应该使标题绝对也删除padding-top: 75px.

考虑这个小提琴：链接

编辑：更新小提琴：链接

于 2012-08-28T10:26:53.787 回答
1

您是否在 body 和 hmtl 上将宽度和高度设置为 100%？

此外，填充正在创建一个垂直滚动条，删除它，它将按预期工作。

http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/

于 2012-08-28T10:27:48.650 回答
0

您已将高度 > 继承为“内容”。

CSS 继承 (http://dorward.me.uk/www/css/inheritance/)

CSS 继承在逐个属性的基础上工作。当应用于文档中的元素时，值为“继承”的属性将使用与该属性的父元素相同的值。

总体而言，“内容”高度已经是从“表单”标签继承的浏览器的 100%。从顶部添加填充后，即“75px”..其总高度变为“浏览器高度 + 75px”。这是滚动页面的原因。

解决方案：1]避免顶部填充到“内容”。给它的内部容器填充 2] 使用样式

body, html{
overflow:hidden;
}
于 2012-08-28T10:43:36.950 回答