我有一个我正在努力建立的网站,我遇到了一个令我疯狂的小障碍.基本上,在没有足够内容填充视口的页面上,我希望最后一个div(我的页脚)填充视口的其余部分,但它目前正在被切断.
我的HTML看起来像这样:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
我尝试使用html, body, footer { height:100%; }但创建了比所需更多的空间,基本上是页脚中全屏长度的空白内容.
如何在不添加滚动条的情况下让我的页脚填充屏幕的其余部分？
在此先感谢,一个沮丧的编码器.
我很确定这样做的唯一方法是计算绝对剩余高度.
IE,用jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
您可能希望在窗口大小调整上执行此操作以允许动态调整大小窗口.
$(window).resize(function(){...});
我知道这已经晚了10个月所以你可能已经想出了什么.但这是我使用的一种解决方案.
(对不起,由于某种原因,我无法让代码的东西正常工作,以显示代码.)基本上包括一个名为"容器"的div,或类似的东西,围绕除页脚之外的所有其他div.页脚div将位于容器div下方,其他所有内容都位于容器内.
将您的身体样式的背景颜色设置为您希望填充位于底部的颜色.然后容器div的背景颜色将是你的身体背景颜色.因此,页脚的所有内容都将是您想要的背景颜色,然后身体背景颜色填充页面的其余部分.