Child element height 100%
<p>Here my HTML</p>

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

<p>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. </p>

<p>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...</p>

<p>here the css classes:</p>

<pre><code>.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;
}
</code></pre>

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