CSS - 可變高度頭100％高度佈局

我想實現的佈局非常簡單。我想要一個帶有標題的100％高度佈局，並且在標題下方，我將有一個側欄用於導航，然後是導航欄旁邊的內容區域（帶有標題的2列）。如果我給標題指定一個高度，我可以輕鬆地做到這一點，但我希望標題只佔用盡可能多的空間。有誰知道如何做到這一點？是否可能不知道標題的高度？CSS - 可變高度頭100％高度佈局

感謝您的任何幫助。

來源

2010-06-03 Brian DiCasa

-1

這應該這樣做

<style type="text/css" media="screen"> 
body 
{ 
    margin: 0; 
    padding: 0; 
    height: 100%; /* this is the key! */ 
    width: 100%; 
} 
#container 
{ 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    background: #eaeaea; 
} 
#header 
{ 
    background: #000000; 
} 
</style> 

<body> 
    <div id="header"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    </div> 
    <div id="container"> 
    <table width="100%" style="height: 100%;"> 
     <tr> 
     <td style="background: #ff0000; width: 250px;"> 
      col1 
     </td> 
     <td style="background: #00ff00;"> 
      col2 
     </td> 
     </tr> 
    </table> 
    </div> 
</body>

來源

2010-06-03 21:06:45 alejandrobog

同意。身體100％高度是關鍵的原因是，如果沒有它，瀏覽器無法計算#container的100％含義，並且默認爲瀏覽器窗口的高度，這不是您想要的。對身體的身高聲明（身高：100％！重要;）和/或有用的評論重要，這對未來的開發人員來說可能是值得的。 – 2010-06-04 03:59:24

謝謝！對於任何試圖做到這一點的人來說，alejandrobog和Dan M都提到身體上的100％是關鍵。我看過的東西是位置：固定在容器上。 – 2010-06-04 15:58:37

這個佈局實際上隱藏了表格的底部（大概與標題的高度相同）。因此我不會說這是可變高度標題問題的解決方案。 – 2012-03-19 11:35:04

CSS - 可變高度頭100％高度佈局

回答

相關問題