我如何擁有一個固定高度的標題，內容div佔據了剩餘空間的100％？

在我開始之前，我知道這裏有很多關於這方面的問題，但我覺得答案嚴重缺乏。他們至少對我沒有意義，或者他們沒有達到我想要的。如果你知道這個重複的固體解決方案的問題，我只是錯過了它;我將刪除這一個。我如何擁有一個固定高度的標題，內容div佔據了剩餘空間的100％？

如果我有以下的HTML ...

<body> 
    <div id="header"></div> 
    <div id="content"></div> 
</body>

如何，簡單來說，我可以使頭部佔用視口的高度50像素，使內容部分填充視圖的其餘部分端口的高度沒有滾動條？理想情況下，這將工作在IE6和沒有表。謝謝！

來源

2010-12-06 Carter

http://stackoverflow.com/questions/1303729/iframe-100-height-inside-body-with-padding適合我 – bobince 2010-12-06 22:34:46

這似乎爲我工作：

<html> 
    <body> 
     <div style="height:60px; position:fixed; width:100%;"></div> 
     <div style="height:100%; width:100%;"> 
      <p style="padding-top:60px;">hola</p> 
     </div> 
    </body> 
</html>

來源

2010-12-06 22:17:50 elpadi

您是否忘記了一個鏈接？ – Carter 2010-12-06 22:19:11

不知道這是你需要什麼，但它會導致＃內容佔用了所有的視口和的#header包含內，那麼任何你的內容想放在#content後面會出現標題。

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     body, html { 
     height:100%; 
     } 
     body { 
     margin:0; 
     padding:0; 
     } 
     #header{ 
      height:50px; 
      background:green; 
      width:100%; 
      } 
     #content { 
     background:blue; 
     position:relative; 
     min-height:100%; 
     height:auto !important; 
     height:100%; 
     } 
     </style> 
    </head> 
<body> 
    <div id="content"> 
    <div id="header">I am the header</div> 
    <p>first bit of content</p> 
    </div> 
</body> 
</html>

身高：自動！重要;高度：100％;位適用於IE 6，您最好是僅使用IE條件註釋來處理針對IE 6的樣式表。

來源

2010-12-06 22:54:11 davidbuttar

我如何擁有一個固定高度的標題，內容div佔據了剩餘空間的100％？

回答

相關問題