Question

当我尝试在子div上设置高度：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

#game-content或其父级body）必须具有固定的height，如果尝试在height #game-content #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% */
}

或

> cscript script.vbs arg1 "multiple values for arg 2"

Answer 2

块元素根据其内容获取高度。由于您给父级<head><meta charset="UTF-8"></head>提供了一个百分比高度，而父级com.mypacakge.MynewClass = new com.mypacakge.MyNewClass();没有明确定义的子内容高度（您给孩子的像素也是如此），这就产生了这个问题。给父母一个特定的高度可以解决问题。

#game-content

Answer 3

我所看到的是浮动元素的常见问题。浮动的元素不会像预期的那样影响其父元素。简单地浮动父元素，在这种情况下＃game-content就可以了。

#game-content
{
    float:left; /* just need this one line */ 
    margin-top:50px;
    overflow:auto;
    height:100%;
    width:100%;
}

CSS - 高度100％的父级不工作

3 个答案: