如何扩展/限制到固定的父容器高度，子父容器？答案

【问题标题】：How to expand/be-limited-to a fixed parent container height, child parent container?如何扩展/限制到固定的父容器高度，子父容器？
【发布时间】：2019-05-29 21:06:48
【问题描述】：

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

这是 DIV 的层次结构：

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

.parent_container 有一个固定高度，.title 占据了一些高度我希望.content 占据其余的高度，但不被.title 占据。

我该怎么做呢？

目前我有这个，但由于父容器的高度不同，90% 并不总是很好，因为.title 总是由H2 样式指定的某个高度。

在 CSS 中有没有办法说“内容height = parent_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*/
    }

【问题讨论】：

标签： css

【解决方案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%。

【讨论】：

这对我不起作用。出于某种原因，我的 .scroll_container 内容超出了 .parent_container 的范围。这本质上就是我的 CSS。 .parent_container{ 高度：500px; } .content { 高度：100%; /*100% 的父级*/ } .scroll_container { overflow:auto; }（对不起...我不知道如何格式化 cmets）

【解决方案2】：

目前还没有使用 css 进行计算的方法，尽管 calc() 正在开发中。有一个很大的论据说，在 css 中进行计算是一场噩梦。但这是题外话。

一种快速解决方法是将 .title 放入 .content，并为内容提供 100% 的高度。让您无需计算任何东西。

选项二是使用 javascript 计算。

【讨论】：

我想我可以回到我的固定计算并设置 .scrolling_content 将占据其容器的特定百分比。