javascript - 高度 100% 不适用于嵌套 div

Question

我试图让子 div 的高度为 100%，但它不起作用，所以我想知道为什么它不起作用: 我给出 html，body height: 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>

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>