CSS - 父级高度 100% 不起作用

Question

当我尝试在子 div 上设置 height: 100% 时，高度保持为 0。

这是父级 div：

#game-content {
  margin-top: 50px;
  overflow: auto;
  height: 100%;
  width: 100%;
}
#game-wrapper {
  float: left;
  margin-left: 90px;
  position: relative;
  height: 100%;
}

<div id="game-content">
  <div id="game-wrapper">
    <div class="game">
      <img class="game-element" src="http://placehold.it/200x200" />
      <div class="game-element" id="description">
        <h4 id="game-header">Game1</h4>
        Desc
      </div>
    </div>
  </div>
</div>

游戏内容的高度也是 100%（不是 0）。虽然游戏包装器的高度保持为 0，但宽度确实有效。我究竟做错了什么？

Answer 1

the#game-content或其parent( body) 必须有一个fixed height，如果尝试height在#game-contentthe中设置一个fixed#game-wrapper将有它的100% height。

试用：

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:1000px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

或者

body, html { /* both to be sized */
   height: 1000px; /* or 100% */
}