Question

看起来它应该很简单，但我在实现这种布局时遇到了麻烦。它是一组使用CSS显示的两列：table-cell。右列有一个响应式图像，应该为两者设置高度。左列包含应根据需要滚动的文本。请参阅JSFiddle：http://jsfiddle.net/xThB7/

<div class="details-wrap">
    <div class="details">
        <div class="scroll">
            Lorem ipsum
        </div>
        </div>
    <div class="details-image">
        <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg" />
    </div>
</div>

我愿意接受任何解决方案，尽管我想避免使用JS

Answer 1

您只需将height: 100%添加到.details和.scroll类：

.details {
    display:table-cell;
    vertical-align:top;
    width:50%;
    background:#ccc;
    line-height:1.5em;
    height: 100%;
}

.scroll {
    padding:15px;
    overflow:auto;
    height: 100%;
}

小提琴：http://jsfiddle.net/xThB7/2/

CSS布局：一侧滚动，另一侧设置高度

1 个答案: