另一個CSS高度100％的問題

更新：我覺得有太多的信息。我的問題是：如何讓在以下爲例的剩餘空間#middle 100％的高度：另一個CSS高度100％的問題

<body> 
    <div id="big"> 
     <div id="header"></div> 
     <div id="middle"></div> 
     <div id="btm"></div> 
    </div> 
</body>

#big，身體的高度，HTML都是100％。
高度頭和底部是120像素的;

來源

2010-09-18 Ervin

FAQ：「如果您的問題是關於... **網頁設計和HTML/CSS佈局，**和您的職位是」設計師「，請查詢[Doctype]（http：// doctype.com/）。」 – 2010-09-18 13:06:26

更新：改變了我的例子，以配合您更新的問題

這是你的佈局工作的例子。測試IE8，IE7，Firefox和Chrome。

這裏的關鍵是不要設置的middle到100％這個高度。相反，你絕對位置，也與top和bottom等於你header和btm元素的高度（在你的情況下，120像素）。

如果設置的middle元到100％的高度，這將是相同的高度big元素，這是身體標記的100％，因此，您middle元素會過大，造成水平滾動酒吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     html 
     { 
      height: 100%; 
     } 
     body 
     { 
      background-color: #EEEEEE; 
      height: 100%; 
      padding: 0; 
      margin: 0; 
     } 
     #big 
     { 
      width: 100%; 
      height: 100%; 
     } 
     #header 
     { 
      width: 100%; 
      background-color: #DDD; 
      height: 120px; 
     } 
     #btm 
     { 
      width: 100%; 
      height: 120px; 
      position: absolute; 
      bottom: 0px; 
      background-color: #999; 
     } 
     #middle 
     { 
      width: 100%; 
      position: absolute; 
      top: 120px; 
      bottom: 120px; 
     } 
    </style> 
</head> 
<body> 
    <div id="big"> 
     <div id="header"> 
      header 
     </div> 
     <div id="middle"> 
      middle 
     </div> 
     <div id="btm"> 
      bottom 
     </div> 
    </div> 
</body> 
</html>

來源

2010-09-18 13:26:35 wsanville

另一個CSS高度100％的問題

回答

相關問題