最小高度和滚动 Div
我不确定这是否可能，但我想我会问。
我有一个 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 增长时拉伸其高度，但始终具有 500px 的最小高度，并且左侧 div 随之增长。
目前我将编写一个 javascript 修复程序，但是我想知道是否可以在纯 css 中执行此操作。也许 CSS3/HTML5 中有一些新的东西会有所帮助？
谢谢你们的帮助。
I'm not sure if this is possible, but I thought I'd ask.
I have a div layout which is two columns inside a div container. These are lined up using inline-block and percentage widths.
The basic layout is as so
<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>
Okay, so this basic layout works great. The problem i'm having is, as you might have noticed I have an overflow on the left column and a min-height on the right column. The idea is that the left column will display a list of items, however I don't ever want that list to stretch the height of the containing div, I want it to fit into 100% of the containing div and scroll.
I would however like the content in the right hand div to be able to stretch the height of the container div when it grows however always having a minimum height of 500px and the left hand div to grow with it.
For the time being I'm going to write a javascript fix, however I would like to find out if this is possible to do this in pure css. Maybe there is something new in CSS3/HTML5 which would help?
Thanks for your help guys.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
display:table;实际上并没有这样做。所提出的问题希望左栏滚动，而不是增加文档的长度。有关问题的说明，请参阅此小提琴。我知道强制
overflow:scroll工作的唯一方法是定义一个高度；max-height:500px;可以像这样工作，但你不能设置100%而不会得到垃圾结果。看起来同时获得布局和滚动你的 js 解决方案是必要的。
display:table;doesn't actually do it. The question as asked wants the left column to scroll, rather than boosting the length of the document. See this fiddle for an illustration of the problem.The only way that I'm aware of to force
overflow: scrollto work is to define a height;max-height:500px;works like so, but you can't set100%without getting garbage results.It looks like to get both the layout and the scrolling your js solution is the necessary one.