Детский высота элемента 100%

Question

Вот мой 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> 

Класс .wrap находится на весь экран. Это идеально! Моя проблема заключается в том, что третий дочерний элемент (div с img-отзывчивым) заканчивается в середине размера экрана.

Как я могу сделать, что третий ребенок является по крайней мере пространством между Navbar и нижним колонтитулом. Конечно, она должна распространяться, если IST содержания больше ...

здесь классов CSS:

.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; 
} 

И следующий вопрос: IST Как я могу сделать h1 Tag вертикальной Align среднего?

Answer 1

Try что-то вроде этого

.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; 
}