Question

我需要一个响应式标题，根据屏幕分辨率和元素的包装来改变高度。随着屏幕变小，菜单包裹在我的徽标下方（这是可取的），并且标题的高度必须增加。显然，我已经将标题的属性设置为height: auto和overflow: hidden，这样就可以了。

问题是：我正在使用下拉菜单。使用height: auto和overflow: hidden代替标题的固定高度，可以很好地隐藏下拉项目......当然是隐藏的。

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

Answer 1

使用clear-fix而不是隐藏的溢出。你想要清除浮动，而不是实际隐藏溢出。在这里阅读：

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

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

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

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

以下a jsFiddle应该有所帮助。