css - 如何在 div 的大小适合视口(viewport)的情况下进行灵活布局，并在必要时滚动

Question

我正在尝试制作一个根据视口(viewport)方向(纵向、横向)流动的布局，因此我将我的 div 样式设置为内联 block ，效果很好。但是，我希望我的第二个 div 只占用可用空间(无论方向如何)并在需要时有一个滚动条。我这里有一个不工作的 fiddle :http://jsfiddle.net/47mdp/ (如果您更改结果窗口的大小，它会重排，但如果结果窗口很小，第二个 div 会超过窗口的底部边缘)

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
div#wrapper{
    top: 0px;
    height: 100%;
}
div#first, div#second{
    display: inline-block;
    width: 150px;
    border: 1px solid blue;
    vertical-align: top;
}
div#second{
    overflow: auto;
}

<div id="wrapper">
<div id="first">
    <p> first div </p>
    <p>some more stuff in first div</p>
</div>
<div id="second">
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
    <p>stuff</p>
</div>
</div>

理想情况下，解决方案将仅使用 css。

编辑:这个 fiddle http://jsfiddle.net/47mdp/1/使我的第二个 div 转到窗口的底部，如我所愿，但当窗口狭窄时不会移动到第一个 div 下方(我也想要 - 第一个 fiddle 这样做)。基本上，设置 position:absolute 似乎是不行的，因为它破坏了我的内联 block 显示。

Answer 1

你需要定义第二个div的高度