在内容容器上设置最小高度

Question

我遇到了一个我没有看到解决方案的情况。这是我的问题：

我有一个页面有三个部分（页眉，部分和页脚）页脚必须冲洗到底部始终。部分部分应该在页眉和页脚之间占据所有可用位置，但必须具有根据页面不同的最小高度（我将手动设置为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

我将添加我的问题更多的信息。首先，部分标签内的大部分内容都将设置为绝对。并隐藏一些并出现在行动（主要是JavaScript）。出于这个原因，我知道每个部分都是最小高度，如果有人点击链接，我需要查看我的所有内容。

对于我的例子，div新闻是隐藏的，当你点击它时，至少需要360px才能看到。但是如果我的窗户比这更小，我的窗户上没有卷轴，我的所有内容都被页脚覆盖。

Answer 1

只能通过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

对不起，我想我阅读错误的问题 - 你想要的部分增长到屏幕大小，或者你手动去设置它，如果有太多的内容有一个滚动条？

在这种情况下，您应该只设置节的高度（而不是最小高度），而不是溢出：hidden use overflow：scroll;