div的高度與自動滾動適合容器div的高度

我遇到了一個頁面的CSS樣式的問題。基本上我有一個div，將被用作一個對話框，我想在其中組織2列的內容：第一個可以包含一長串元素，並且應該可以滾動，第二個應該很小，在一個固定的位置。因此，我不希望所有的對話內容都是可圈可點的，只是其中的一半。我把toghether一個例子here on jsfiddle的情況下，你需要做一些嘗試...代碼：div的高度與自動滾動適合容器div的高度

CSS

#container { 
border: 1px solid black; 
height: 200px; 
} 
#main { 
    display: table; 
    border: 1px dashed blue; 
    height: 200px; 
} 
#row{ 
    display: table-row; 
    height: 200px; 
} 
#leftPanel{ 
    display: table-cell; 
    width: 50%; 
    height: 200px; 
    overflow: auto; 
    border: 1px dotted red; 
} 
#rightPanel{ 
    display: table-cell; 
    width: 50%; 
    vertical-align: top; 
    height: 200px; 
}

HTML

<div id="container"> 
    <div id="main"> 
     <div id="row"> 
      <div id="leftPanel"> <!-- This one should be scrollable --> 
       <!-- Long list of element here--> 
      </div> 
      <div id="rightPanel"> 
       <div style="height: 50px;"> 
        Something here 
       </div> 
       <div style="height: 50px;"> 
        Something else here 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我怎樣才能得到leftPanel是滾動？正如你所看到的，我甚至設置了CSS表的每個組件的固定高度，但沒有任何結果......這裏有什麼問題？

來源

2012-05-07 themarcuz

像這樣：http://jsfiddle.net/Zw8WK/10/

使用overflow-y: scroll或交替overflow : scroll

現在，如果你需要的左欄的高度是某種高度可變的，可能更棘手的，我在這裏將其設置爲父容器的高度。

來源

2012-05-07 14:30:41

謝謝。其實是的，左邊的列應該比容器div小，這只是一個簡單的例子......但我想我可以從我自己弄清楚......或者至少嘗試一下，然後纔對SO做出新的問題;） – themarcuz

有沒有可能不把高度設置爲leftPanel（它應該從容器繼承）？ –

div的高度與自動滾動適合容器div的高度

回答

相關問題