Child element height 100%

Question

Here my HTML

<div class="wrap">
   <div class="container" style="padding: 5px 0px 10px 10px;">
      <a href="/"><img class="pull-right img-responsive" src="logo.png"></a>    
   </div>
   <nav id="w0" class="navbar navbar-default" role="navigation">
      <div class="container">
         <div id="w0-collapse" class="collapse navbar-collapse">
            <ul id="w1" class="navbar-nav nav">
               <li class="active"><a href="/">Home</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <div class="img-responsive startpage" style="background-image: background.jpg;">
      <div class="container">
         <div class="site-index">
            <h1 class="middle"> Title vertical middle</h1>
         </div>
      </div>
   </div>
</div>
<footer class="footer">
</footer>

The class .wrap is covers the full screen. That is perfect! My problem ist that the third child element (div with img-responsive) ends in the middle of the screen size.

How can I make that the third child is at least the space between the Navbar and the footer. Of Course it should extend if the content ist is more...

here the css classes:

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}
.img-responsive{
    display: block;
    max-width: 100%;
    height: auto;
}
.startpage {
    padding-top: 20px;
}

And the next question ist: How can I make the h1 Tag vertical Align middle ?

score 0 · Answer 1 · answered Mar 11 '16 at 11:24

Try something like this

.img-responsive{
    min-height: 300px; // Adjust the height of your min height
    background-image: url('background.jpg;');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Child element height 100%

1 Answers1