html - 下拉菜单下推内容。最大高度切换

Question

我正在切换一个 open 类来更改我的 UL 元素的最大高度以显示和隐藏导航。

我不完全理解为什么但是这一行

.navbar--upper,
.navbar--lower {
    height: 50px;
}

正在搞砸内容，而不是将其推倒。

我已经包含了一个 jsfiddle 链接来演示这个 https://jsfiddle.net/h1hpLvs3/ 可能是一个非常简单的解释，但有人可以发光吗？

此外，如果有更好的方法，请随时添加一些建设性的批评或想法。

Answer 1

使用“最小高度:50 像素”不会产生相同的结果。子元素以固定高度“溢出”父容器，为您提供了一些处理它们的选项。如果您愿意，可以隐藏这些元素。最小高度允许 parent 与 child 一起扩展。父容器将它的 sibling 向下推。

可能想要的效果？

.navbar--upper,
.navbar--lower {
    min-height: 50px;
}

fixed height but hide the children, (keep them safe from danger)举个例子

.navbar--upper,
.navbar--lower {
    height: 50px;
    overflow: hidden;
}