最小高度和滚动比例

我不确定这是否可能，但我想我会问。最小高度和滚动比例

我有一个div布局，它是div容器中的两列。这些是使用内联块和百分比宽度排列的。

基本布局是如此

<div id="containter" style="width:100%"> 

<div id="leftDiv" style="width:20%; height:100%; display:inline-block; overflow-y:scroll"> 
    List of Content 
</div> 

<div id="rightDiv" style="width:80%; height:100%; display:inline-block; min-height:500px; vertical-align:top"> 
    Some expanding information 
</div> 

</div>

好了，所以这个基本的布局的伟大工程。我遇到的问题是，因为您可能已经注意到我的左列有溢出，右列有最小高度。这个想法是，左列将显示项目列表，但我不希望该列表扩展包含div的高度，我希望它适合包含div的100％并滚动。

但是，我会喜欢在右边div的内容能够拉伸容器div的高度，但它始终有一个最小高度500px和左边的div与它一起成长。

暂时我会写一个JavaScript修复，但是我想知道这是否可以在纯CSS中做到这一点。也许有什么新的CSS3/HTML5这将有助于？

感谢您的帮助球员。

来源

2011-10-20 Loz Blake

着名的100％高度div ...我的这个解决方案只是人造背景，没有一个*适当的* CSS解决方案，虽然你的问题... – jackJoe

是的的确是！在CSS中一定有办法做到这一点，我希望有一些天才知道它。有时使用身高100％可能会非常直观！ –

我发现这个：http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/和它的工作，但如上所述，它不支持在IE ... – jackJoe

display:table;实际上并没有这样做。所要问的问题是要左栏滚动，而不是增加文档的长度。有关该问题的说明，请参阅this fiddle。

我知道强制overflow: scroll工作的唯一方法是定义高度; max-height:500px;作品like so，但不能设置100%而不会获取垃圾结果。

它看起来像获得布局和滚动你的JS解决方案是必要的。

来源

2011-10-24 05:38:45 egid

最小高度和滚动比例

回答

相关问题