Height 100% not working for nested div

Question

I was tried to make child div take height 100% but it\'s not working, so I\'d like to know why it is not working: I give html, body height: 100% then .hero height 100% and .

Answer 1

.hero-image is not taking 100% of a parent because container-fluid, row and col-lg-6 height is not 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>

Answer 2

Height 100% is a very elusive issue, and normally creates more problems than it solves. However, to answer your question:

Basically, every container between the html element and the element you want to be 100% must have height: 100%; on it.

So, in your case, this means the following CSS must be added:

/* 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%;
}

Below is your code, built into a snippet, so you can see it work. Note that I've additionally added col-sm-6 classes to your col-lg-6 elements so you can see it work in a narrower window. (NOTE: click the "Expand Snippet" link in order to get a wide enough window to see it working).

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>