Question

我正在尝试制作一个根据视口方向（纵向，横向）流动的布局，所以我将我的div设计为inline-block，效果很好。但是，我希望我的第二个div只占用可用空间（无论方向如何），如果需要，还有一个滚动条。我在这里有一个不工作的小提琴：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。

编辑：这个小提琴http://jsfiddle.net/47mdp/1/使我的第二个div按照我想要的方式移动到窗口的底部，但是当窗口很窄时（我也想要 - 并且第一个div）不会移动到第一个div下面小提琴这样做）。基本上，设置position：absolute似乎是禁止的，因为它击败了我的内联块显示。

Answer 1

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

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

1 个答案: