入れ子のdivの高さ100％が動作しません

Question

子divの高さを100％としましたが、動作しません。なぜ動作しないのかを知りたいのですが： html、body height：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画像は、容器流体、反転ROWおよび反転COL-LG-6ので、親の100％を取っていません高さは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; 
 
    \t 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>