Question

我在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重现该行为。首先使用菜单按钮打开/关闭菜单，然后打开菜单并调整视图大小以检查问题。

Answer 1

我修改了HTML结构以及一些CSS来修复你看到的问题。这是解决方案的pen。

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

固定元素（100％高度）和css3变换/转换的奇怪行为

1 个答案: