在相對分區內推倒絕對溢出div

我有一個CSS佈局，其中內容div具有絕對定位能夠在溢出情況下滾動內容。此內容div位於相對div內，因爲上述元素的高度可能不同（這由其內容決定）。在相對分區內推倒絕對溢出div

但是，我的解決方案只適用於Chrome和IE9，內容div不會在Firefox中顯示滾動條。不幸的是，我的解決方案也不適用於舊版瀏覽器。你知道更好的佈局來完成上述要求嗎？

編輯：

佈局應填充視口寬度爲100％和100％的高度，這就是爲什麼我可能需要使用表（請糾正我，如果我錯了）。另外，我更喜歡沒有JavaScript的解決方案，因爲我有其他可以操縱內容的JavaScript。

我當前的代碼：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>Test</title> 
    <style type="text/css"> 
     html, body, form { width:100%; height:100%; margin:0; overflow:hidden; } 
    </style> 
</head> 
<body> 
    <table style="width: 100%; height: 100%;"> 
     <tr> 
      <td style="height: 120px; border: 1px solid #000;"> 
       Top: always same height 
      </td> 
     </tr> 
     <tr style="height: 20px; background-color: Red;"> 
      <td> 
       Variable height: could push the next row down 
      </td> 
     </tr> 
     <tr style="position: relative; overflow: auto;"> 
      <td style="position: relative; background-color: White; vertical-align: top; overflow: scroll;"> 
       <div style="position: relative;"> 
       <div style="position: absolute; bottom: 0; top: 0; left: 0; right: 0; "> 
       Content with variable height: needs overflow auto/scroll 
       </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2011-07-20 Martin de Ruiter

如果你需要滾動，爲什麼'overflow：hidden'？ – zneak

你真的需要桌子嗎？ – fromvega

溢出：隱藏，因爲我只想滾動內容div，而不是整個頁面。我想我需要桌子，因爲它應該填滿整個視口。這似乎不適用於這種情況（請糾正我，如果我錯了）。 –

我無法弄清楚如何在只CSS做到這一點，但我可以把它用JavaScript工作。

HTML（體內）：

<div id='top'> 
    top - fixed height 
</div> 
<div id='middle'> 
    middle - some content and stuff 
</div> 
<div id='bottom'> 
    bottom - this content should scroll<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/> 
</div>

CSS：

body{ 
    margin:0; 
    padding:0; 
} 

#top{ 
    width:100%; 
    height:100px; 
    background:#ccf; 
} 

#middle{ 
    float:left; 
    width:100%; 
    background:#cfc; 
} 


#bottom{ 
    width:100%; 
    background:#fcc; 
    clear:both; 
    overflow:scroll; 
    position:fixed; 
    bottom:0; 
}

的JavaScript（被放置在頭）：

function getDocHeight() { 
    var D = document; 
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight)); 
} 

window.onload = function() { 
    document.getElementById('bottom').style.height = getDocHeight() - (100 + document.getElementById('middle').offsetHeight) + "px"; 
} 

window.onresize=window.onload;

的getDocHeight()函數就是從這裏：http://james.padolsey.com/javascript/get-document-height-cross-browser/

來源

2011-07-20 03:23:41

在相對分區內推倒絕對溢出div

回答

相關問題