我在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;
}
您可以检查此笔是否重现该行为。使用菜单按钮先打开/关闭菜单，然后打开菜单并调整视图大小以检查问题。
我修改了HTML结构以及一些CSS来解决您看到的问题。这是解决方案的笔。
我相信这个问题与translate有关，所以我将其更改为使用position。