0

我正在使用 2 列 div 布局，其中左右列的宽度都是不确定的。左列 div 包含一个图像。右列 div 包含一个标题 div 和它下面的文本内容 div。左列图像的宽度优先于右列，右列获取宽度方面的废料。这两列都在一个 div 容器内，该容器具有固定的高度（和宽度，但这并不重要）。此布局使用以下代码工作： 

.container {
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    overflow: hidden;
}
.scrollable-content-header {
    font-size: 25px;
    border-bottom: 1px solid black;
}
.scrollable-content {
    font-size: 18px;
    overflow: auto;
}

如果超出容器高度，文本内容 div 应该是可滚动的。但我无法让滚动条出现在.scrollable-content元素上。这是一些 HTML：

<div class="container">

    <div class="left">
        <img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
    </div>

    <div class="right">
        <div class="scrollable-content-header">Lorem Ipsum</div>
        <div class="scrollable-content">
            Lorem ipsum dolor sit amet, consectetur... etc.
        </div>
    </div>

</div>

如果container元素有overflow: auto而不是隐藏，则会出现一个滚动条。但它将允许滚动整个容器。我不希望那样，只有.scrollable-content应该是可滚动的，不包括标题。我假设overflow: hidden为了实现流体宽度效果而在右列 div 上的技巧会导致问题。

这是一个小提琴： http: //jsfiddle.net/PJdNW/
任何帮助表示赞赏。

更新
据我了解，CSS 无法确定可滚动内容的高度需要是多少，因此为了使滚动条工作并保持正确的高度，需要设置可滚动内容的像素高度。

就我而言，整个容器的高度是动态的，所以我选择了一个 JS 解决方案，它获取整个容器的高度并减去可滚动内容标题的高度，以获得我需要的像素值可滚动内容（加上一些微调，即边距）。

我暂时保留这个问题，希望我错了，CSS可以胜任这项任务。

4

1 回答 1

1

您必须设置容器的高度，否则容器将自动调整为内容长度。此外，将溢出属性设置为滚动。修复如下：

        .container {
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .right {
            overflow: hidden;
        }
        .scrollable-content-header {
            font-size: 25px;
            border-bottom: 1px solid black;
        }
        .scrollable-content {
            font-size: 18px;
            overflow: scroll;
            height:200px;
        }

更新小提琴：http: //jsfiddle.net/hdrenollet/PJdNW/1/

于 2013-10-29T18:10:21.143 回答