将列扩展到浏览器底部，标题为空 [英] Have column extend to bottom of browser with an empty header

问题描述

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

我希望主要内容扩展到浏览器的末尾。

As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.

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

I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.

有没有办法做到这一点？

Are there any methods to do this? possibly a working javascript fix?

推荐答案

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

You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/

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

}

请注意，top属性设置为标题的底部，底部设置为设置为零以点击页面底部。如果您想拥有页脚，则可以更改bottom属性以适应页脚。

Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.

也可以使用javascript做到这一点，我通常使用JQuery，因此这里有一些JQuery完成此操作的代码：

Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:

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

此javascript（Jquery）将与相对定位的div一起使用，唯一需要更改的CSS是删除高度：100 ％上的 div＃main-content样式。

This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.

这篇关于将列扩展到浏览器底部，标题为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！