css - 溢出 : scroll is ignored

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;
}

我想在 .content 上应用 overflow: auto，因为它的内容溢出了容器高度，但是这根本行不通(参见 fiddle ) .我可以将 overflow: auto 应用于 .container 并且它会起作用，但我不想在 .header 元素上应用滚动.

此外，.header的高度可能会改变，所以我无法为.content设置一个固定的高度。

任何想法/建议？谢谢:)

编辑:为了澄清，我为容器设置了一个高度，我不能将高度设置为.header(它可能会改变但不会大于.container) 或 .content(由于 .header 而可能与 .container 高度重叠)

Answer 1

不幸的是，您无法在 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";