0

我花了好几个小时寻找解决方案，但无济于事。

我有一个内容 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 设置为底部：0；但它产生了相反的效果，因此 div 不会延伸到屏幕的初始底线以下，从而使文本在长页面上徘徊在 div 之外。

不幸的是，填充不会变成负数，所以我不能用这种方式将 132px 剃掉。

任何建议将不胜感激。

4

1 回答 1

0

添加一个容器，将其最大高度设置为 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>
于 2013-02-17T02:43:26.807 回答