Question

我正在尝试执行以下操作。创建一个网站，中间有一个静态顶部（标题）和文章区域，并带有导航控件的粘性页脚。我的挑战如下。我希望控件始终位于页面底部，因此如果重新缩放浏览器/在不同的resoullution打开页面，那么只有文章区域被调整大小....我无法解决此问题/或看到正在执行此操作的页面。

我想要一个100px的静态标题，一个150px的静态页脚和一个window.innerHeight - footer - header的文章区域

我看过很多带有静态页脚的页面，但是对于所有这些页面，你必须浏览到屏幕的底部才能看到它。我希望我的屏幕一直显示在屏幕的底部。

任何帮助将不胜感激。

Answer 1

#header{
background:yellow;
position:absolute;
top:0;
left:0;
height:100px;
width:100%;    
}

#foot{
background:yellow;
position:absolute;
bottom:0;
left:0;
height:150px;  
width:100%;        
}

#content{
background:orange;
position:absolute;
top:100px;
bottom:150px;
width:100%;    
}

在xhtml http://jsfiddle.net/DWMHr/

中

Answer 2

我认为您最好的选择可能是制作文章区域overflow:scroll

使用HTML5和CSS3根据屏幕分辨率调整主体大小

2 个答案: