Question

<div id="content">
        <div id="header">

        </div>

        <div id="main-content">


        </div>


    </div>


html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}


div#content{width:600px; margin: 0 auto; height:100%;}

div#header{width:600px; height:200px;}

div#main-content{width:600px; height:100%; background-color: white;}

正如您所看到的，添加标题会将所有内容都推下去。我希望main-content扩展到浏览器的末尾。

我认为我之前通过创建一个图像类似于我的背景的标题来解决这个问题，以便伪造外观，但是我将使用的背景太复杂了。

有没有办法做到这一点？可能是一个有效的javascript修复工具？

Answer 1

您可以绝对定位主内容div，然后指定其顶部和底部属性。我在这里设置了一个jsfiddle：http://jsfiddle.net/wrn8Y/1/

div#main-content{
    position: absolute;
    top: 200px;
    width:600px;
    bottom: 0px;
    background-color: white;

}

请注意，top属性设置在标题的底部，底部设置为零以触及页面底部。如果您想要一个页脚，您可以更改底部属性以容纳页脚。

你也可以用javascript做这个，我通常使用JQuery，所以这里有一些JQuery代码可以完成它：

$('div#main-content').height($(document).height() - $('div#header').height());

这个javascript（Jquery）将使用相对定位的div，你需要更改的唯一css是删除“div＃main-content”样式的“height：100％”。

使用空标题将列扩展到浏览器底部

1 个答案: