我花了好几个小时寻找解决方案,但无济于事。
我有一个内容 div,我希望它至少扩展到页面底部,但在没有文本时不要超过它。相关代码如下:
#top {
background-image: url('image.png');
width: 798px;
position:absolute;
top:0px;
margin-left:-399px;
left:50%;
display: block;
height: 132px;
}
#content {
position:absolute;
top:132px;
width: 798px;
margin-left:-399px;
left:50%;
display: block;
min-height:100%;
}
<body>
<div id="top"></div>
<div id="content">TEXT</div>
</body>
问题是,如您所见,内容 div 从页面下方 132px 开始,在页眉之后。这转化为 132px 的空白,我可以向下滚动查看。在文本填满的较长页面上不存在该空白,但在较短的主页上,这是一个问题。
我尝试将内容 div 设置为 bottom:0;但它产生了相反的效果,因此 div 不会延伸到屏幕的初始底线以下,从而使文本在长页面上徘徊在 div 之外。
不幸的是,填充不会变成负数,所以我不能那样削减 132px。
如有任何建议,我们将不胜感激。
最佳答案
添加一个容器,将其最大高度设置为 100%。在容器内,为顶部和内容设置各自的最大高度?
CSS:
#container {
min-height:100%;
}
#top {
background-image: url('image.png');
width: 798px;
position:absolute;
top:0px;
margin-left:-399px;
left:50%;
display: block;
min-height:132px;
}
#content {
position:absolute;
top:132px;
width: 798px;
margin-left:-399px;
left:50%;
display: block;
min-height:100%;
}
HTML:
<body>
<div id="container">
<div id="top"></div>
<div id="content"><p>TEXT</p></div>
</div>
</body>
关于html - dontent div min-height=100% 创建空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14917211/