使用媒体查询自动提高 Foundation 中的 div？

Question

我的问题是我似乎遇到的一个常见问题，但由于某种原因，我的大脑从未记录过正确的答案，可能是因为我很慢。

我的问题是关于我的导航菜单。

当我在 Foundation 中处于全宽状态时，我将 large-12 类和 small-12 类用于较小的视口，但是我将导航 div 放在另一个父 div 中，所以当我进入小视口时，导航会下降低于父 div 的高度。

我已将父 div 设置为 min-height: 204px 和 max-height: auto 假设它会调整高度以包裹子元素，但我不起作用。

那么，确保由于较小的视口而增加高度的子 div 也会推动父 div 高度的最佳方法是什么？

这是我的html：

<div>
      <div class="interior-header">
        <div>
          <nav class="utility">
            <ul>
              <li><a href="#" class="register">Register</a></li>
              <li><a href="#" class="login">Login</a></li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="main">
            <div class="logo small-12 large-offset-1 large-5 columns left"></div>
            <ul class="small-12 large-6 columns right">
              <li><a href="#">Home</a></li>
              <li><a href="#">Catalog</a></li>
              <li><a href="#">Learn More</a></li>
              <li><a href="#">Be a Broker</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div> 
      </div>
    </div>

这里是这个特定组件的 css：

// HEADER INTERIOR

.interior-header {
    background: url('../img/hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 174px;
    max-height: auto;
}   


// NAVIGATION FIRST TIER

nav.main {
    margin-top: 2%;
    min-height: 100px;
    height: auto;
}

任何帮助都会很棒，谢谢。

Answer 1

.main {overflow: hidden;}

这会导致块级元素包含其后代。