Question

我拥有三个动态添加内容的容器。基本上我希望这三行只占用浏览器窗口的高度。但我希望他们根据内心内容自动调整大小。

因此，如果它们都具有相同数量的内容，则每个内容的高度约为33％，然后是溢出：auto。或者，如果一个容器没有内容而另外两个容器内容很多，则没有内容的容器的高度应为0，其他两个应为50％。

此外，没有必要支持IE - 它是内部产品，只使用chrome和firefox浏览器，所以如果有css3解决方案，那就没关系。

以下是我现在所拥有的不起作用我想要的例子：

HTML：

<div class="container">

    <div class="one">
     <!-- dynamically added content -->
    </div>

    <div class="two">
     <!-- dynamically added content -->
    </div>

     <div class="three">
     <!-- dynamically added content -->
    </div>

</div>

CSS：

.container {
  position: absolute;
  top: 0;
  bottom: 0;
}

.one,
.two,
.three {
  overflow: auto;
  max-height: 33%; 
}

Answer 1

根据内容自动设置高度。你有一个最大高度设置，所以你永远不会达到50％的高度。容器元素是需要说一个大小还是随内容改变？

在CSS中如何让三个容器根据内容自动调整高度

1 个答案: