我需要创建一个网页，其中包含正常页眉 + 粘性页脚 + 垂直拉伸(stretch)的流体内容。 但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。
我设法使用表格完成了此操作，但我真的想避免使用它们。另外我想避免使用 JS 或 jQuery。 粘性页脚仅在达到最小高度之前是粘性的。
对于所有这些特定术语，我深表歉意，只是我为此苦苦挣扎了很长一段时间。我已经尝试了使用 pusher 的通常的粘性页脚布局，但是当我使用 height: 100% 时我的主要内容没有被拉伸(stretch)(当包装器使用 height: auto 时似乎有一个错误)。
应该发生什么的示例图像:http://s22.postimg.org/6fvdd4mxd/layout.png
JS Fiddle 展示我现在拥有的东西: http://jsfiddle.net/6qatg/
代码:
<body>
<table class="wrapper">
<tr><td id="topBar" class="topBar">
</td></tr>
<tr><td valign="top" id="mainContent" class="mainContent">
</td></tr>
<tr><td class="footer" id="footer">
</td></tr>
</table>
</body>
html{
min-width: 790px;
min-height: 300px;
font-family: 'Open Sans', sans-serif;
height: 100%;
}
body{
font-family: 'Open Sans', sans-serif;
/*border: 2px solid black;*/
height: 100%;
min-height: 300px;
min-width: 790px;
}
*{
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.footer {
height: 35px;
background-color: #00F8FD;
width: 100%;
}
.topBar{
height: 75px;
width: 100%;
background-color: #00F8FD;
}
.mainContent{
background-color: #EEF8FD;
height: 100%;
}
提前致谢。
最佳答案
您是否尝试过在内容容器中添加标题和页脚？为了 fiddle 演示的目的，我将最小高度设置为 500，没有滚动条，页脚保持在 500 的最小高度 - 或者当设置为 760 时，它将保持不变。
看到这个 http://jsfiddle.net/carbontype/FYe2b/
HTML
<div class="contain">
<div class="content">
<div class="header">header</div>
<div class="data">hello 123</div>
<div class="footer">footer</div>
</div>
</div>
CSS
*{box-sizing:border-box;}
html, body{height:100%; margin:0px; padding:0px;}
.contain{width:100%; height:100%;}
.header{height:50px; position:absoulte; top:0px; width:100%; background:red; z-index:10;}
.content{height:100%; position:relative; background:green; min-height:500px;}
.content .data{padding:10px;}
.content .footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}
关于HTML:页眉+页脚+具有特定规范的流体内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18130543/