我正在Windows Vista PC上使用Google Chrome 32。我目前正在为项目构建画布菜单,使用position:fixed设置布局,使用CSS transform显示/隐藏菜单。

为此,我遇到了布局的奇怪行为。如果我在狭窄的窗口中打开以查看带有画布的菜单的移动版本,则一切都很好,菜单正确放置并具有100%height的样式,就像我想要的那样。但是,如果我调整窗口大小,菜单将失去其100%的高度,并且元素将获得父级高度(也使用position: fixed)。有人也遇到过这个问题吗?如果可以,我该如何避免呢?

这是菜单的标记:

<body>
  <header>
  <div class="container">
    <span id="logo">LOGO</span>
    <a href="#" id="mobile-nav">Menu</a>
    <nav>
        <ul id="menu" >
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
      </ul>
    </nav>
  </div>
</header>
</body>


和CSS:

body{
  font-family: sans-serif;
}

header, nav{
  position: fixed;
  top: 0;
}
header{
  width: 100%;
  left: 0;
  height: 45px;
  background-color: #ffcc00;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.container{
  max-width: 1024px;
  position: relative;
  margin: 0 auto;
  display: block;
 }

#logo{
  position: absolute;
  top: 10px;
  left: 10px;
}

#mobile-nav{
  display: inline-block;
  padding: 7px 10px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #cc3300;
  color: #fff;
  text-decoration: none;
}

nav{
  right: 0;
  bottom: 0;
  width: 30%;
  background-color: #cc3300;
  z-index: 999;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

body.active header
{
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}

#menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu a{
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

#menu a:hover{
  background-color: #ff3300;
}


您可以check this pen重现该行为。播放时使用菜单按钮先打开/关闭菜单,然后打开菜单并调整视图大小以检查问题。

最佳答案

我修改了HTML结构以及一些CSS,以解决您遇到的问题。这是解决方案的pen

我认为该问题与translate有关,因此我将其改为使用position

10-05 20:38
查看更多