無數次：CSS，*自動大小*標題和100％高度內容

Question

這是我期望實現的。我有HTML沿着這些線路（在現實中我使用過程中的一個單獨的CSS文件）：

 
    <div id="container" style="position:absolute; left:20px; top:20px; height:300px; width:400px;"> 
     <div id="header" style="width:100%;">header stuff here...</div> 
     <div id="content">content stuff here...</div> 
    </div> 

我想標題是自動大小與高度，並通過佔用父div的其餘部分內容。內容應該完全填充 - 沒有滾動條或任何東西。假設現代瀏覽器，我不關心IE6甚至IE7。

到目前爲止我所見過的所有例子都假定了固定的標題高度。自動調整大小的標題可以在沒有JavaScript的情況下實現，還是超出了現代瀏覽器的功能？

Answer 1

看看this fiddle或its output。嘗試調整窗口的大小。

HTML：

<div id="container" style="height: 100%;"> 
    <div id="header" style="width:100% ">some stuff here...</div> 
    <div id="content">ome other stuff here...</div> 
</div> 

JS：

$(document).ready(function() { 
    var header_height = $("#header").height(); 
    var content_height = $("body").height() - header_height; 
    $("#content").height(content_height); 
}); 

$(window).resize(function() { 
    var header_height = $("#header").height(); 
    var content_height = $("body").height() - header_height; 
    $("#content").height(content_height); 
}); 

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#header { 
    height: auto; 
    background-color: green; 
} 
#content { 
    width: 100%; 
    background-color: blue; 
} 

的JS幫助內容div來取所有可用的空間，即使我們調整窗口的大小:)

Answer 2

它可以用CSS完成。您需要使用display:table並且內容窗格高度爲100％。不幸的是，你還需要額外的<div>裏面的標題和內容。 JSFiddle鏈接在這裏：http://jsfiddle.net/RBHXm/3/。如果您願意，還可以添加頁腳：http://jsfiddle.net/DE8pA/3/

您還需要引入填充以防止margin collapse。否則像<h1>會看起來很有趣。

HTML：

<div id="container"> 
    <div id="header" ><div><h1>Header stuff<br />here...</h1></div></div> 
    <div id="content"><div><p>content stuff here...</p></div></div> 
</div> 

CSS：

/* colors to make the demo clear: */ 
#container { background: #ddd; } 
#header { background: #ddf; } 
#content { background: #dfd; } 

/* CSS provided in question: */ 
#container { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    height: 300px; 
    width: 400px; 
} 
#header { 
    width: 100%; 
} 

/* your fix: */ 
#container { 
    display: table; 
} 

#container > * { 
    display: table-row;  
} 

#content { 
    height: 100%; 
} 

#container > * > * { 
    display: table-cell; 
    padding: 0.01px; 
} 

/* optional styles to make it look pretty */ 
#content > div { 
    border: 2px solid green; 
} 

#header h1 { 
    text-align: center; 
    margin: 3px; 
    color: blue; 
}