Question

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

.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的网页，会出现垂直滚动条。我该如何纠正？

Answer 1

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

考虑这个小提琴：link

编辑：更新了小提琴：link

Answer 2

你的身体和html的宽度和高度设置为100％吗？

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

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

Answer 3

你已经把高度＆gt;继承“内容”。

CSS继承（http://dorward.me.uk/www/css/inheritance/）

CSS继承适用于按属性为基础的属性。当应用于文档中的元素时，值为“inherit”的属性将使用与父元素对该属性相同的值。

总体而言，“内容”高度已经是从“form”标签继承的浏览器的100％。从顶部添加填充，即“75px”..总高度变为“浏览器高度+ 75px”。它的理由是滚动页面。

解决方案： 1]避免顶部填充为“内容”。将填充物放入其内部容器中 2]使用风格

body, html{
overflow:hidden;
}

理解<div>行为</div>

3 个答案: