【发布时间】：2011-02-17 06:36:10
【问题描述】：
尝试使网站中的元素表现如下时卡住了：
<div class="for100procHeight">
<div class="header">fixed top</div>
<div class="content">long text with scrolling content</div>
<div class="footer">fixed bottom</div>
</div>
快速提醒css高度：
- 百分比计算如下 相对于高度 生成框的包含块。
- 如果它具有块级子级，则 高度是两者之间的距离 顶部的顶部边界边缘 块级子框<...>
- 但是，如果元素 具有非零顶部填充和/或顶部 边框，或者是根元素，那么 内容从上边距开始 最上面的孩子的边缘<...>
乐观的解决方案是：
.for100procHeight { height: 100%; }
.header, .footer { height: 20px; }
.content { height:100%; overflow:scroll; }
/* failed badly: footer didn't fit into the window (heightwise) */
随着乐观情绪的减弱，又进行了一次尝试：
<div class="for100procHeight">
<div class="header">fixed top</div>
<div class="footer">fixed bottom</div>
<div class="wrapper">
<div class="content">long text with scrolling content</div>
</div>
</div>
.for100procHeight { height: 100%; }
.header, .footer { position: absolute; height: 20px; }
.content { height:100%; overflow:scroll; }
.header { top: 0px; left: 0px; }
.footer { bottom: 0px; left: 0px; }
.wrapper { padding-top: 20px; padding-bottom: 20px; }
/* failed badly: scroll down arrow was behind footer */
/* failed badly: scroll down arrow didn't fit into the window (heightwise) */
除了高度是浏览器窗口的 100%（导致元素底部位于可见区域之外）之外，这看起来几乎应有尽有。 Margins/Paddings/Wrappers/etc 不会改变这一点。
我查看了Complex height in CSS，但是客户端/元素高度上的 JS 支持看起来更加迷人。
编辑：
从 complex-height-in-css 复制粘贴并带有扩展名
---------------------------------------
| fixed top | | fixed top | |
|-----------| |-----------| |
| long |^| | long |^| |
| text |_| | text |_| |
| with |_| | with |_| |
|scrolling| | |scrolling| | |
| content | | | content | | |
|-----------| |-----------| |
| fixed bott| | fixed bott| |
--------------------------------------
我意识到没有提到其中两个，但也没有将 <div class="for100procHeight"> 作为整个页面内容。
解决方案：
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.page {
position: absolute;
height: 100%;
width: 100%;
}
.content {
width: 100%;
height: 100%;
overflow: scroll;
overflow-x: hidden;
}
.content .inner {
padding-top: 30px;
padding-bottom: 30px;
}
.top {
width: 100%;
margin-left: -17px;
position: absolute;
top: 0px;
left: 0px;
height: 30px;
background: url('background.gif');
}
.bottom {
width: 100%;
margin-left: -17px;
position: absolute;
left: 0px;
bottom: 0px;
height: 30px;
background: url('background.gif');
}
.top span, .bottom span {
padding-left: 17px;
z-index: 2000;
}
.top span, .bottom span {
display: block;
width: 100%;
}
#list2.page {
margin-left: 110%;
}
</style>
</head>
<body>
<div id="list1" class="page">
<div class="top"><span>top</span></div>
<div class="bottom"><span>bottom</span></div>
<div id="listContent" class="content">
<a id="page1" name="page1" style="width:1px;"></a>
<div class="inner">
...
</div>
</div>
</div>
<div id="list2" class="page">
<div class="top"><span>top</span></div>
<div class="bottom"><span>bottom</span></div>
<div id="listContent" class="content">
<a id="page2" name="page2" style="width:1px;"></a>
<div class="inner">
...
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： html css cross-browser