如果目标元素深度嵌套，则使用50％高度来视口

Question

我不完全确定以下问题：

<div class="container">
  <div class="row">
    <div class="group">
      <a>
        <div class="col-lg-3 full-h"></div>
      </a>
      <a>
        <div class="col-lg-3 full-h"></div>
      </a>
      <a>
        <div class="col-lg-3 full-h"></div>
      </a>
    </div>
  </div>
</div>

和

html, body { height: 100%; }

.full-h { 
  height: 50%; 
}

我是否需要将container, row and group的高度设置为height: 100%以使full-h正确应用？如果我没有设置它，它就不起作用。

Answer 1

是的，您需要将高度设置为目标的所有父元素的100％。

另一种方法是将目标元素的高度设置为50vh，这意味着视口高度的50％。在这种情况下，您不必依赖父元素的高度。

.full-h { 
  height: 50vh; 
}

这里是小提琴：http://jsfiddle.net/fd6n8p7p/1/