Question

基本上，我有这个结构（样本）：

<div class="container">
    <div class="header">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odio pariatur numquam aspernatur ex iste praesentium. Aliquid quo voluptas eaque sequi autem voluptatem alias ullam provident tempora adipisci optio error!
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit esse assumenda eligendi obcaecati quas sapiente voluptatum a enim quam officia aliquid exercitationem earum at sint harum ullam nostrum distinctio!
    </div>
</div>

这个样式表：

.container {
    height: 100px;
}
.header {
    background-color: blue;
}
.content {
    background-color: green;
    overflow-y: auto;
}

我想在overflow: auto上应用.content，因为其内容溢出容器高度，但这根本不起作用（请参阅此fiddle）。我可以将overflow: auto应用于.container，但它会有效，但我不想在.header元素上应用滚动。

此外，.header高度可能会发生变化，因此我无法将固定高度设置为.content。

有什么想法/建议吗？谢谢:)）

编辑：为了澄清，我为容器设置了一个高度，我不能将高度设置为.header（可能会改变但不会大于.container）也不会{{1} }（由于.content）

，可能与.container高度重叠

Answer 1

http://jsfiddle.net/q26cL/3/

这是因为你没有高度。因此div相应地扩展到内容。

我设置了120px for .content的高度，现在可以正常工作。

.content {
    height: 120px;
}

Answer 2

不幸的是，你无法在CSS中执行此操作，但只需使用少量的javascript即可。

var container = document.querySelector(".container");
var header = document.querySelector(".header");
var content = document.querySelector(".content");

content.style.height = (container.offsetHeight - header.offsetHeight) + "px";

溢出：滚动被忽略

2 个答案: