Question

我不确定这是否可行，但我想我会问。

我有一个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的高度，我希望它适合100％的包含div和滚动。

然而，我希望右手div中的内容能够在容器div增长时拉伸容器div的高度，但总是最小高度为500px，而左手div则随之增长。

暂时我将编写一个javascript修复程序，但是我想知道是否可以在纯css中执行此操作。也许CSS3 / HTML5中有新功能会有所帮助吗？

感谢您的帮助。

Answer 1

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

我知道迫使overflow: scroll工作的唯一方法是定义一个高度; max-height:500px;工作like so，但如果没有获得垃圾结果，则无法设置100%。

看起来要同时获得布局和滚动你的js解决方案。

最小高度和滚动分区

1 个答案: