javascript - 让列扩展到浏览器底部，标题为空

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;}

如您所见，添加 header 会将所有内容下推。我希望 main-content 扩展到浏览器的末尾。

我想我之前通过创建一个带有与我的背景相似的图像的标题来伪造外观来解决这个问题，但是我将使用的背景太复杂了。

有什么方法可以做到这一点吗？可能是有效的 javascript 修复？

Answer 1

你可以让你的 main-content div 绝对定位，然后指定它的 top 和 bottom 属性。我在这里设置了一个 jsfiddle:http://jsfiddle.net/wrn8Y/1/

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

}

请注意，top 属性设置为标题的底部，bottom 设置为零以到达页面底部。如果您想要一个页脚，您可以更改 bottom 属性以适应页脚。

您也可以使用 javascript 执行此操作，我通常使用 JQuery，所以这里有一些 JQuery 代码可以完成此操作:

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

此 javascript (Jquery) 将与相对定位的 div 一起工作，您唯一需要更改的 css 是删除“div#main-content”样式上的“height: 100%”。