css - 为什么这个 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% 高度。

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