css - 带有下拉菜单的响应标题 : height and overflow

Question

我需要一个响应式标题，它会根据屏幕分辨率和元素的环绕改变高度。随着屏幕变小，菜单环绕在我的 Logo 下方(这是可取的)并且标题的高度必须增加。显然，我已将 header 的属性设置为 height: auto 和 overflow: hidden，这样就可以了。

问题是:我正在使用下拉菜单。使用 height: auto 和 overflow: hidden 而不是标题的固定高度，使下拉项很好......当然隐藏。

我现在的问题是:解决这个问题的最佳方法是什么？首选纯 CSS 解决方案。

Answer 1

使用清除修复而不是 overflow hidden 。你想清除 float ，而不是真正 overflow hidden 。在这里阅读:

http://nicolasgallagher.com/micro-clearfix-hack/

<header class="clear-fix"></header>

如果你使用预处理器等，还有更优雅的方法。

.clear-fix:before,
.clear-fix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clear-fix:after {
    clear: both;
}

这里是 a jsFiddle这应该有所帮助。