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

我希望上面的代码能够在背景中显示背景图像，然后在图像中间附近显示背景图像，＆＃34;模态＆＃34;高于背景。但是，出于某种原因，我很想知道，父div .game-board折叠没有高度，因此没有背景图像，但模态似乎很好。为什么是这样？

Answer 1

规则 - 对于在CSS中工作的百分比高度，父元素应具有可以计算的高度。

例如，当您说.game-board应该有height 100％时 - 那么出现的问题是100％的问题？因为在这种情况下父元素body没有明确指定高度。 Min-height不起作用，因为这不会将元素的高度固定到特定视图端口上的特定值。例如，如果视口的高度为100px，那么min-height: 100%可能意味着从100px到无穷大。因此height上的.game-board规则不起作用。

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

html, body {
    height: 100%;
}

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

这是一个工作小提琴。 http://jsfiddle.net/8dhfac8w/

Answer 2

.game-board需要固定的高度。 .menu可以使用可变高度，只要它由固定高度的父级包含即可。这有效（Fiddle）。

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

父背景与背景图像＆＃34;崩溃＆＃34;添加子div时

2 个答案: