3

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

因此，如果它们都具有相同数量的内容，则它们中的每一个都有大约 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%; 
}
4

1 回答 1

0

高度是根据内容自动设置的。你有一个最大高度设置，所以你永远不会得到 50% 的高度。容器元素需要说一种尺寸还是可以随内容而变化？

于 2012-07-25T16:46:31.057 回答