高度 100% 不适用于嵌套 div

Question

我试图让孩子div占据100%的高度，但它不起作用，所以我想知道为什么它不起作用： 我给html，身体高度：100%，然后.hero高度100%，.hero图像必须是100%：

html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
}
}

<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>

Answer 1

> 高度 100% 是一个非常难以捉摸的问题，通常产生的问题多于它解决的问题。 但是，要回答您的问题：

基本上，html元素和您想要 100% 的元素之间的每个容器都必须有height: 100%;。

因此，在您的情况下，这意味着必须添加以下 CSS：

/* These styles get all of the containers to 100% height */
/* address ONLY sub-elements of .hero element to prevent issues with other pages / code */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}

下面是您的代码，内置在代码片段中，因此您可以看到它的工作原理。 请注意，我另外向col-lg-6元素添加了col-sm-6类，以便您可以看到它在较窄的窗口中工作。 (注意：单击"展开代码段"链接以获得足够宽的窗口以查看其工作情况(。

html,
body {
height: 100%;
}
.hero {
width: 100%;
height: 100%;
border: 1px solid #0094ff;
}
.hero-image {
width: 100%;
height: 100%;
background-image: url('http://via.placeholder.com/500x100');
background-size: cover;
}
/* These styles get all of the containers to 100% height */
.hero .container-fluid,
.hero .row,
.hero [class*="col-"] {
height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>

Answer 2

.hero-image 没有占用 100% 的父级，因为容器流体、行和 col-lg-6 高度不是 100%

html, body{
height:100%;
}
.hero{
width:100%;
height:100%;
border:1px solid #0094ff;
}
.heroFullHeight{
/*height: inherit;*/
height:100%;
}
.hero-image{
width:100%;
height:100%;
background-image:url('../images/1.jpg');
background-size:cover;
	background-color: red;
}

<section class="hero">
<div class="container-fluid heroFullHeight">
<div class="row heroFullHeight">
<div class="col-lg-6 heroFullHeight">
<div class="hero-image">
Hello
</div>
</div>
<div class="col-lg-6">
<div class="hero-content">
<h1>Hey, I Am Mike Ross</h1>
<p>
Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
</p>
</div>
<div class="skills">
</div>
</div>
</div>
</div>
</section>