css - 如何扩展/限制为固定的父容器高度，子父容器？

Question

我有很多父容器。页面上有很多这样的实例。它们的高度不同。

这是 DIV 的层次结构:

.parent_container
  |-----> .title
  |-----> .content

.parent_container 有固定高度，.title 占用部分高度我希望 .content 占据剩余的高度，但不被 .title 占据。

我该怎么做？

目前我有这个，但是因为父容器的高度不同，所以 90% 并不总是有效，因为 .title 总是由 H2< 指定的特定高度 样式。

在 CSS 中有没有一种方法可以表示“内容 height = parent_height - title height”？

/*just an example...different parent_containers have diff heights)*/
    .parent_container{
    height:530px;
    }

    .content {
    height:90%; /* to make room for title */
    overflow:auto; /*show scrollbars*/
    }

Answer 1

在这种情况下，有一种方法可以让它发挥作用，但您必须调整 HTML 和 CSS。

HTML 更改:

.parent_container
|-----> .content
   |-----> .title
   |-----> .scroll_container

标题在内容中。如果 .content 影响它们，您可能需要覆盖 .title 中的某些样式。

然后，将 .content 的高度设置为 100%。现在您可能需要根据样式调整 .title 和 .content 上的 CSS 以使其工作，但这应该是可行的。将 overflow: auto 放在 .content_scroller 上，您将希望从 .content 容器中删除相同的样式。 .content_scroller 然后可以根据需要滚动内容，.content 容器可以是 .parent_container 高度的 100%。