Question

我的页面上有一个div用于我的内容，其ID为＆＃34;包装＆＃34; （见curtainandblinddevotion.co.uk）。顶部还有一个导航栏，底部还有一个页脚。

我需要将包装器设置为浏览器窗口的高度，减去导航和页脚的高度。我如何使用javascript进行此操作？

脚本的要点是大型浏览器窗口没有从底部浮动的页脚，并且包装器的背景应该向右延伸到页脚。

提前感谢您的帮助，

康纳

Answer 1

我刚创建了这个JSFiddle：http://jsfiddle.net/5ur87/

如果您的目标是即使在大屏幕上也能使页脚始终位于页面底部，您可以将position:fixed;与bottom:0px;一起使用，如下所示：

footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 20px;
    background-color: green;
    color: white;
}

Answer 2

在这里，我将为您提供一个非常基本的示例，说明如何在大屏幕中保持页脚始终处于底部。 Read Here to Know more about How it Works

<强> HTML

 <div id="wrapper">
    <div id="header">My Header</div>
    <div id="content">My Content</div>
    <div id="footer">This my footer</div>
</div>

<强> CSS

html,body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:green;
}
#content {
padding:10px;
padding-bottom:80px;   /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
}

DEMO

将div的最小高度更改为浏览器高度

2 个答案: