Html 带有背景图像的父div“；“崩溃”；添加子div时

我试图创建一个游戏，其中用户看到的第一件事是在游戏背景上的开始菜单模式

基本HTML：

<div class="game-board"> 
   <div class="menu"> </div>
</div>

---

我希望上面的代码在背景中显示背景图像，然后在图像中间附近的某个地方，“modal”在背景之上。然而，出于某种原因，我很想知道，父

div.game board

是折叠的，没有高度，因此没有背景图像，但是模式看起来很好。为什么会这样

规则-要在CSS中使用高度百分比，父元素应具有可计算的高度

例如，当你说

.game board

应该有一个100%的

高度

，那么出现的问题是100%是什么？因为在这种情况下，父元素

body

没有明确指定高度<代码>最小高度不起作用，因为这不会将图元高度固定为特定视口上的特定值。例如，如果视口的高度为100px，则

min height:100%

可以表示从100px到无穷大的任何值。因此，

.game board

上的

高度

规则不起作用

要解决此问题，请将

min height

更改为

height

html, body {
    height: 100%;
}

此外，绝对定位菜单需要有一个高度，如果其中还没有内容，否则它不会出现

---

这是一把小提琴

。游戏板

需要固定高度

.menu

可以使用可变高度，只要它包含在固定高度的父项中。这是有效的（）

html, body {
    height: 100%;
}

    html, body{
      min-height:100%;
    } 

    .game-board{
      background-image: url("http://trikkiworld.com/images/bg/bg_sand/25012011/sand006.jpeg");
      width: 200px;
      height: 200px;
    }

    .menu{
      position: relative;
      width: 50%;
      height: 50%;
      top: 25%;
      margin-left: auto;
      margin-right: auto;
      display: block;
      background: whitesmoke;
      border-radius: 4px;
    }