窗口上的滾動條只調整一個div，用於多div垂直佈局

我已經在這裏呆了幾天，閱讀了關於CSS，溢出和佈局的每篇可以想到的文章。窗口上的滾動條只調整一個div，用於多div垂直佈局

我有一個帶橫幅的頁面（位置：絕對），下面是一個包含兩個塊div的div。第二個塊div又有另一個包含文本的div。

我想在窗口大小調整時，最內部的DIV顯示一個滾動條。

我已經閱讀了關於確保在所有包含元素上設置高度的帖子，我已經在所有正確的位置設置了overflow-y：auto。只是不行。

包含div像這樣：http://i.imgur.com/oDHM4.png

我想綠色部分時（僅y方向）調整大小的瀏覽器窗口中滾動。

任何設計中的滾動DIV都非常有用......但不應該這麼難。任何和所有的幫助表示讚賞。

丹尼

MARKUP

標記是非常簡單的：

<body> 
    <div id="page-header" style='background:blue;'>page-header</div> 
    <div id="page-content"> 
     <div id="configContent" style='height: inherit; background: steelblue;'> 
      <h1 id='panTitle'>Panel Title</h1> 
      <div id='panProbes' class='libPanel' style="background: maroon;"> 
       <p>panProbes</p>  
       <div id="probesCT1" class="configtable" style='background: red;'> 
        <p class='pTblTitle'>probesCT1</p> 
       </div> 
       <div id="probesCT2" class="configtable" style='background: grey;'> 
        <p>probesCT2</p> 
        <div id='pTbl' style='background: green;'> 
         <div class='pRow'>1st para in pTbl</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some data</div> 
         <div class='pRow'>some more data</div> 
         <div class='pRow'>some more data</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

** **理髮

這裏的砍倒在覈心本質的CSS：

html, body {  
    position:absolute; 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 1010px; 
    overflow: hidden; 
} 

#page-header { 
    position: absolute; 
    left: 5px; 
    top: 5px; 
    height: 60px; 
    width: 100%; 
} 

#page-content { 
    width: 100%; 
    height: 100%; 
    margin-top: 95px; 
} 

#configContent { 
    height: 100%; 
    width: 300px; 
    padding-left: 0px; 
    border-width: 3px; 
    margin-left: 30px; 
    margin-right: auto; 
} 

.libPanel { height: 100%; } 

#probesCT1 { width: 150px; margin: 0 auto 0 30px; } 
#probesCT2 { 
    width: 200px; 
    /* height: 100%; */ 
    margin: 0 30px 50px 30px; 
    padding: 0 10px 10px 10px; 
} 

#pTbl { overflow-y: auto; } 
.pRow { margin-bottom: 10px; }

來源

2012-03-10 Danny

究竟是你面臨的問題？代碼 '＃probesCT2 { width：200px; 身高：60％; margin：0 30px 50px 30px; padding：0 10px 10px 10px; } #pTbl {overflow-y：auto;身高：70％; }' 適合我 – redDevil 2012-03-10 11:04:13

對於overflow-y: auto工作和製作滾動條，那div必須有一個特定的高度設置。所以in this example（與您的HTML以上）我將它設置爲200px，這是沒有滾動條顯示內容所需的空間，因此顯示滾動條。但是，如果設置爲100%it does not work，因爲1）需要取消註釋包含div的高度，以及2）該div中的內容少於填充div的高度所需的內容，因此不會顯示滾動條。隨着更多內容的添加，you get a scroll bar。

我認爲你真正想要的是確保你總是有一個滾動條，如果需要的話，但即使如此，你需要確保div不會低於頁面底部，或者你仍然可能遇到問題滾動條本身離開頁面。 I've configured something這可能更符合你的意圖，但請注意，我必須使用多個嵌套的relative或absolute元素才能達到此效果。我還不得不猜測一些高度定位的元素頂部清除您的標題。

來源

2012-03-10 19:57:43 ScottS

窗口上的滾動條只調整一個div，用於多div垂直佈局

回答

相關問題