我正在尝试仅使用 HTML 和 CSS 创建布局，这样我就没有使用 Javascript 进行布局的额外复杂性。
布局如下，由三部分组成：页眉、主要内容和页脚。
页眉和页脚的高度应该相同，并且应该始终可见。在调整大小时，页眉、内容和页脚应相应地扩展/收缩，但有一些例外。首先，当达到主要内容的最大高度时，主要内容不应该再扩大，而是应该扩大页眉和页脚。其次，当主要内容的最小高度被击中时，任何部分都不应再收缩，并且视图应该是可滚动的。
至于主要内容，它可以水平滚动，视口的主滚动条位于屏幕底部，而页眉和页脚应保持原位。
到目前为止，我已经弄清楚了如何通过填充整个视口的绝对定位容器 div 来实现可水平滚动的主要部分，但我似乎无法弄清楚任何元素的垂直大小。我能想到的唯一方法是挂钩 on resize 事件，我想避免这种情况，因为它感觉很hacky。
【问题讨论】：
<body>
<div class="header">header</div>
<div class="content">content
</div>
<div class="footer"></div>
和css
.header, .content, .footer {
position: absolute;
}
.header{
top: 0;
width: 100%;
height: 50px;
background-color: #99CC00;
left: 0;
right: 0;
}
.content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
background-color: #FF6600;
}
.footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-color: #6600CC;
}
【讨论】：
你的问题很棘手，我只会使用 fixed 定位页眉和页脚，然后是一个简单的 水平内容 div.. 看我做的fiddle
HTML
<div id="header">Header</div>
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
<div id="footer">Footer</div>
CSS
*{
padding:0;
margin:0;
}
html{
overflow-y:hidden;
}
#header,#footer {
width:100%;
position:fixed;
height:50px;
left:0;
background:#404040;
z-index:9999;
}
#header{top:0;}
#footer{bottom:0;}
#content{
position:absolute;
background:gray;
top:50px;
left:0;
min-width:100%;
bottom:50px;
float:left;
display:block;
width:5000px; /*your content width but 5000 for testing*/
}
如果您希望页眉和页脚缩放，您可以使用 this fiddle
Css3 方式
您可以使用新的 css3 属性 flex-box：
查看以下链接以获取 Example
更多关于 flexbox 的信息：Tutsplus
Flex-box 正是这样做的目的
但是IE9不支持...
艰难的所有新浏览器都将拥有它，包括 IE10：
caniuse
【讨论】：