html - 使用 HTML5 和 CSS3 根据屏幕分辨率调整正文大小

Question

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

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

我见过很多带有静态页脚的页面，但所有这些都必须浏览到底部它的屏幕如此可见。我希望我的始终显示在屏幕底部。

任何帮助都感激不尽。

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

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

Answer 2

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