任何人都可以想出这个CSS高度怪癖

时间:2016-09-29 21:07:22

标签: css tabs height flexbox

好的,这让我完全难过,一直试图解决几天无济于事。

我使用cbpFWTabs.js来分割我的内容。

然而,它似乎表现得很奇怪,因为它忽略了我的高度参数,并将div设置为内容大小。

只有这样才能设置一个固定的高度,但我希望div能够动态调整大小以填充屏幕的其余部分并显示滚动条,如果它超过了content-wrap div(保持菜单栏固定)。

我检查了所有的父母,它似乎没有回应我尝试的任何事情:(

此处示例: http://numerco.com/wp-content/uploads/NUA/scratch.html

我确信我错过了一些微不足道的事情,但它让我疯狂。

谢谢!

1 个答案:

答案 0 :(得分:1)

每当元素上有height: 100%时,这意味着它将继承其父元素的高度。

因此,您需要做的第一件事是在height: 100%上设置.container,使其高度占据body的整个高度。

然后,在height: 100%上设置.container > section。然后,孩子们知道伸展到正确的高度(从body向下传播)。

这应解决你的OP中的问题。然而,看起来你的高度似乎仍然有些可疑。如果需要,请随意提出另一个问题。