让列以空标题延伸到浏览器的底部

Have column extend to bottom of browser with an empty header

本文关键字：浏览器 底部 标题      更新时间：2023-09-26
<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;}

可以看到，添加标题将所有内容向下推。我希望主内容扩展到浏览器的末尾。

我想我以前通过创建一个类似于我的背景的图像的标题来解决这个问题，但是我将使用的背景太复杂了。

有什么方法可以做到这一点吗?可能是一个工作的javascript修复?

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

<>之前div#主要内容{位置:绝对的;前:200像素;宽度:600 px;底部:0 px;背景颜色:白色;}之前

注意，top属性被设置为标题的底部，而bottom被设置为0以击中页面的底部。如果你想有一个页脚，你可以改变底部属性来容纳页脚。

也可以用javascript来实现，我一般用JQuery这里有一些JQuery代码可以实现

<>之前$(' #主要内容div ') .height($(文档).height()——美元("div#头").height ());之前

这个javascript (Jquery)将与相对定位的div一起工作，你唯一需要改变的css是删除"div#main-content"样式上的"height: 100%"

相关文章：