我正在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
。