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

Question

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

我还没有完全理解为什么会这么一行

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

正在拧紧内容而不是推下来。

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

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

Answer 1

使用'min-height：50px'没有相同的结果。子元素以高度固定的方式“溢出”父容器，为您提供了一些处理它们的选项。如果您愿意，可以隐藏这些元素。最小高度允许父级与子级一起扩展。它是父容器推动它的兄弟姐妹。

可能产生预期效果？

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

固定高度，但隐藏孩子，（保护他们免受危险）仅举例来说

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