为什么这个 CSS 限制不显示容器高度？

Question

我有一个应该有最大高度的 CSS div。它的 CSS 有：

div#feed
    {
    border: 2px solid black;
    float: right;
    height: 80%;
    max-height: 80%;
    overflow-y: hidden;
    width: 200px;
    }

当条目被添加到 div 时，它会一直增长，直到它被屏幕底部截断（并且仍然会继续增长）。这种行为在 Chrome、Firefox、IE8 和 IE9 中是一致的。

有没有一种很好的跨浏览器方式来做我在上面的 CSS 中尝试的事情？

谢谢，

Answer 1

以百分比指定高度仅适用于其父元素具有指定高度的元素。因此，如果父级具有计算的高度，它将起作用，但是如果高度是自动的，则不会。

如果你想让基于 % 的高度起作用，你需要为每个元素指定一个高度，一直到 DOM 给 body 100% 高度。

但是，如果您可以给父级一个固定的高度，那么问题就解决了。