Question

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

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

当我在基金会的全宽时我使用大型12级和小型12级用于较小的视口，但是我将导航div放在另一个父级div中，所以当我到达小视口时导航会丢失低于父div的高度。

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

那么确保由于视口较小而导致高度增长的子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;}

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

使用媒体查询自动提高基金会的div？

1 个答案: