嘿伙计们我正在为客户建立一个网站。 基本的布局应该是这样的：http://jsfiddle.net/t6EKv/469/
问题是我需要使用中间div滚动内容，页眉和页脚应始终保持可见。
为了使这有点复杂，我将支持大于或等于1280px的监视器宽度。由于按钮和文本将显示在页眉和页脚（绝对定位）中，因此整个页面应该能够在y轴上滚动以获得更小的屏幕。滚动部分不是问题的一部分，但它只是意味着我无法在3个div中的任何一个上使用postion:fixed;。
我在chrome中完美地工作了，但是一旦我检查了Firefox和IE它就失败了。 Firefox折叠内容div并在比标题更高的z-index上显示实际内容。 IE出于某种原因不会显示我的全部内容。
我将当前代码的基础知识放在JSFiddle：http://jsfiddle.net/9JMm2中。但即使在这里，它似乎比我在我的Chrome版本中更加惨淡。
有人可以帮忙吗？
答案 0 :(得分：0)
使用＆＃34;绝对＆＃34;，内容使用＆＃34;溢出：自动＆＃34;
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
div.header { position:absolute; top:0em; height:1em; background-color:red; white-space:nowrap; min-width:640px;}
div.content { position:absolute; top:1em; bottom:1em; overflow:auto; background-color:green;}
div.footer { position:absolute; bottom:0em; height:1em; background-color:yellow;white-space:nowrap;min-width:640px;}
</style>
</head>
<body >
<div class='header'> this is the header </div>
<div class='content'>
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
this is the content this is the content this is the content
</div>
<div class='footer'> this is the footer </div>
</body>
</html>