我试图让子div的高度设为100％，但它不起作用，所以我想知道为什么它不起作用：我给html设置了身高：100％，然后设置了.hero height 100％和.hero-image是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>高度100％是一个非常难以捉摸的问题，通常会产生更多无法解决的问题。但是，要回答您的问题：
基本上，元素和要成为100％的元素之间的每个容器html都必须具有容器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-sm-6为您的col-lg-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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句