HTML：側邊欄+隨高度的滾動格設置爲當前頁面大小

我有一個側邊欄HTML：側邊欄+隨高度的滾動格設置爲當前頁面大小

#sidebar { 
    float: left; 
    position: relative; 
    width: 200px; 
    padding: 20px; 
}

和主體：

#main { 
    margin: 0 20px 0 260px; 
}

我有有側邊欄的網頁，並且主要由一組應該保持靜態的過濾器組成，並且一個表格既高又太寬，不適合頁面。我希望將表格放在自己的滾動div中，以便div始終延伸到頁面的右側和底部，並在頁面重新調整大小時重新調整大小。到目前爲止，我有這樣的：

<div id="sidebar"> 
    <div class="boxed" id="menu"> 
     <h2 class="title">Main Links</h2> 
     <div class="content"> 
     <ul> 
      <li><a href="/">Main page</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div> 
    <div id="main"> 
     <h2>Header</h2> 
     <div class="filters"> 
     Filters go here 
     </div> 
     <div style="overflow: auto;">   
     <table><!-- very large table --></table> 
     </div> 
    </div> 
    </div>

這工作完全，除了當桌子太高，以適應當前頁面的情況。接下來會發生的是滾動div的底部滾動條不在頁面上。頁面上有一個主垂直滾動條，如果我一直向下滾動，則會到達div的水平滾動條。我想如果div永遠不會超過頁面的底部，我不會有這個問題。

解決此問題的最佳方法是什麼？我試着這樣做：

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;">

然而，這只是取得了DIV拉伸以適應整個頁面，包括左側邊欄。

來源

2012-02-09 Claudiu

您的代碼將div設置爲覆蓋整個頁面。將其更改爲反映您的側邊欄的寬度：（從左邊200像素，它看起來像你想有一個20像素的填充，所以220）

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:220px;">

至於底部滾動條，我建議設置「寬度」爲你的表格元素。

table { 
    width: 700px; 
}

來源

2012-02-09 23:52:08 jhilgert00

嗯，它適用於側邊欄，但它也覆蓋頁面的頂部 - 標題和過濾器。我將如何解釋這些？過濾器可能有不同的高度，所以我不確定絕對定位會起作用。我需要它將該div的頂部設置到過濾器 – Claudiu 2012-03-07 20:36:22

的底部，這確實是解決方案。頁面問題的頂部是通過改變頂部的像素數量來解決的 – Claudiu 2012-04-20 14:45:19

HTML：側邊欄+隨高度的滾動格設置爲當前頁面大小

回答

相關問題