html - 添加子 div 时父 div 的背景图像为 "collapses"

Question

我正在尝试创建一个游戏，用户首先看到的是游戏背景之上的开始菜单模式。

基本 HTML:

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

CSS:

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

.game-board{
    background-image: url(../images/sand.png);
    width: 1260px;
    height: 100%;
}

.menu{
  position: absolute;
  width: 400px;
  right: 0;
  top: 30%;
  left: 31%;
  background: whitesmoke;
  border-radius: 4px;
}

我希望上面的代码在背景中显示背景图像，然后在图像中间附近的某个地方，“模态”在背景上方。但是，出于某种原因，我很想知道，父 div .game-board 折叠时没有高度，因此没有背景图像，但模态显示正常。为什么是这样？

Answer 1

规则 - 为了在 CSS 中使用百分比高度，父元素应该有一个可以计算的高度。

例如，当您说 .game-board 的 height 应该为 100% - 那么出现的问题是什么是 100%？因为本例中的父元素 body 没有明确指定高度。 Min-height 不起作用，因为它不会将元素的高度固定为特定视口(viewport)上的特定值。例如，如果视口(viewport)的高度为 100px，则 min-height: 100% 可能表示从 100px 到无穷大的任何值。因此 .game-board 上的 height 规则不起作用。

要解决此问题，请将 min-height 更改为 height

html, body {
    height: 100%;
}

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

这是一个工作 fiddle 。 http://jsfiddle.net/8dhfac8w/