Question

我正在处理的页面位于www.joelchristophel.com。您可以通过检查大多数浏览器中的元素来查看源代码。我希望内容div（称为main_body）填充标题和main_bottom div之间的区域。为此，我设置了顶部像素的位置以及底部的像素。但是，这不起作用，因为main_body只扩展到内容的大小。我应该怎么做呢？

编辑：最后，main_body应该固定到位，溢出设置为滚动。

Answer 1

我建议你手动设置每个div的高度，然后玩它。在#main .main_body的css中设置：

height = 500px;

500是你想要的任何价值。然后将main_bottom div放在主体div中。

你还应该看看这个链接：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks如果你想让一个子div与父div相同的高度，这可能会帮助你。

Answer 2

以下是您要求的代码。

<强> HTML

<div class="header">

</div>

<div class="content">
    Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!Content Comes Here..!!
</div>

<div class="footer">

</div>

<强> CSS

.header
{
    width:100%;
    float:left;
    border:1px solid black;
    height:50px;
}

.content
{
    width:100%;
    float:left;
    border:1px solid black;
    margin-top:10px;
    height:auto:
}

.footer
{
    width:100%;
    float:left;
    border:1px solid black;
    height:50px;
    margin-top:10px;
}

试一试.. !!

Answer 3

我最终使用百分比作为高度。并从bottom: 20;中移除main_bottom行。这就像一个魅力。

基于top（）和bottom（）在CSS中设置DIV的高度

3 个答案: