如果目标元素嵌套很深，则使用 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; 
}

这是 fiddle：http://jsfiddle.net/fd6n8p7p/1/

如果目标元素嵌套很深，则使用 50% 的高度作为视口

Using 50% height to viewport if target element is deeply nested

html

css

height