我有一个案例,我没有看到解决方案.这是我的问题：
我有一个页面有三个部分(页眉,部分和页脚)页脚必须始终冲到底部.部分部分应该占据页眉和页脚之间的所有可用位置,但必须具有根据页面不同的最小高度(我将在CSS上手动设置它).
达到最小高度时,应该可以在整个页面上滚动.
这是我用来设置我的标题,部分和页脚占用所有可用位置的代码示例.
CSS
body {
margin: 0
}
header,section,footer {
left:0;
right:0;
overflow: hidden;
position: absolute;
}
header {
height: 70px;
top: 0;
background-color: green;
}
section {
top: 70px;
bottom: 195px;
background-color: gray;
min-height:300px;
}
article {
overflow: hidden;
background-color:lightyellow;
}
.news {
position: absolute;
bottom: -30px;
width: 100%;
background-color: lime;
}
footer {
height: 195px;
bottom: 0;
background-color: pink;
}
HTML
<header>
<div class="container">
<h2>My header</h2>
</div>
</header>
<section>
<article>
<div class="news">
<div class="row-fluid">
<a href="#">UP</a>
</div>
<div class="row-fluid">
<div class="container">
<div class="span6">News 1</div>
<div class="span6">News 2</div>
</div>
</div>
</div>
</article>
</section>
<footer>
<div class="container">
My footer
</div>
</footer>
一个jsfiddle可用于示例：http://jsfiddle.net/Nk6uY/
编辑
我如何在我的部分添加一个最小高度,当它到达时,我的窗户上有一个滚动条？
编辑2
我将添加更多关于我的问题的信息.首先,我在section标签内的内容大部分将以绝对值设置.并隐藏一些并出现在动作(主要是javascript)上.出于这个原因,我知道每个部分,如果有人点击链接,我需要看到我的所有内容的最小高度.
对于我的例子,div新闻是隐藏的,当你点击它时,至少需要360px才能看到.但是如果我的窗户比这个小,我的窗户上没有卷轴,我的所有内容都被页脚覆盖了.
解决方法
你只能通过javascript实现这一点 – 你需要提供你的标题,部分和页脚ID,然后使用这样的东西：
function ResizeBody() {
var header = document.getElementById("Header");
var section = document.getElementById("Section");
var footer = document.getElementById("Footer");
var height = GetBodyHeight() - header.offsetHeight - footer.offsetHeight - anyPaddingToTopOrBottomOfThreeMainSections;
if (height > 0) {
body.style.height = height + "px";
}
}
function GetBodyHeight() {
if (window.innerHeight > 0) {
return window.innerHeight;
}
else {
return document.documentElement.clientHeight;
}
}
window.onresize = function () {
ResizeBody();
};
$(document).ready(function () {
ResizeBody();
});
UPDATE
对不起,我想我读错了这个问题 – 你是否希望该部分增长到屏幕尺寸,或者如果有太多内容有滚动条,你是否手动设置它？
在这种情况下,您应该只设置该部分的高度(而不是最小高度)而不是溢出：隐藏使用溢出：滚动;
