在內容容器上設置最小高度

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;