固定元素的奇怪行为（高度为100％）和CSS3转换/过渡

Question

I'm using Google Chrome 32 in a Windows Vista PC. 我正在Windows Vista PC上使用Google Chrome 32。 I'm currently building a off-canvas menu for a project, using position:fixed for setting the layout and css transform to show / hide the menu. 我当前正在使用position:fixed来设置项目的布局并使用CSS transform来显示/隐藏菜单，从而为项目构建了画布菜单。

Working on that, I faced an strange behavior of the layout. 为此，我遇到了布局的奇怪行为。 If I open in a narrow window to check the mobile version with the off-canvas menu, everything is fine, the menu is correctly positioned and have 100% height , like I want it to have. 如果我在狭窄的窗口中打开以查看带有画布的菜单的移动版本，则一切都很好，菜单正确放置并具有100％的height ，就像我想要的那样。 But, if I resize the window, the menu loses its 100% height, and the element gets the parent height (also using position: fixed ). 但是，如果我调整窗口大小，菜单将失去其100％的高度，并且元素将获得父级高度（也使用position: fixed ）。 Has anyone faced this issue too? 有人也遇到过这个问题吗？ If yes, how can I avoid that? 如果可以，我该如何避免呢？

Heres the markup for the menu: 这是菜单的标记：

<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>

And the CSS: 和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;
}

You can check this pen that reproduces the behavior. 您可以检查重现此行为的笔。 Play with the menu button to open / close the menu first, then open the menu and resize the view to check the issue. 播放时使用菜单按钮先打开/关闭菜单，然后打开菜单并调整视图大小以检查问题。

Answer 1

I modified the HTML structure as well as some of your CSS to fix the issue you're seeing. 我修改了HTML结构以及一些CSS，以解决您遇到的问题。 Here's a pen of the solution. 这是解决方案的笔。

I believe the issue had something to do with the translate so I changed it to use position instead. 我认为这个问题与translate因此我改为使用position 。

固定元素的奇怪行为（高度为100％）和CSS3转换/过渡

问题描述

1 个解决方案

解决方案1
0 2014-02-18 00:20:02

固定元素的奇怪行为（高度为100％）和CSS3转换/过渡

问题描述

1 个解决方案

解决方案1 0 2014-02-18 00:20:02

解决方案1
0 2014-02-18 00:20:02