Question

我有很多父容器。页面上有很多这种情况。他们有不同的高度。

这是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*/
    }

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％。

Answer 2

目前没有使用css计算的方法，尽管calc（）正在进行中。有一个很大的争论说，在css中进行计算是不幸的噩梦。但这不是主题。

一个快速解决方法是将.title 放在 .content中，并为内容提供100％的高度。节省了计算任何东西的需要。

选项二是使用javascript计算。

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

2 个答案: