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的高度

回答

相关问题