Как сделать заголовок на весь экран?

Question

Я хочу, чтобы сделать заголовок полный экран с фоном IMG, но у меня есть проблема

<header> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1 class="logo"><a href="#">Super Tramp</a></h1> 
       <h2 class="title">Sketch your next vacation route today</h2> 
       <h3 class="sub-title">The Best Landing Page Travel Website for your vacation.</h3> 
      </div> 
      <div class="col-md-4 col-md-offset-4 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3"> 
       <form> 
        <p class="info"> 
         Enter the required data and <br> 
         continue to choose the route. 
        </p> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="text" placeholder="Full Name"> 
        </div> 
        <div class="form-group"> 
         <input type="email" class="form-control" id="text" placeholder="Email Adress"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="text" placeholder="Phone Number"> 
        </div> 
        <button type="button" class="btn btn-primary submit">Request Vacation</button> 
       </form> 
      </div> 
     </div> 
    </div> 
</header> 

Это HTML Markup

header { 
height: 100vh; 
background: linear-gradient(
    rgba(0, 0, 0, 0.25), 
    rgba(0, 0, 0, 0.25) 
),url("../image/bg-header.jpg"); 
background-size: cover; 
margin-bottom: 35px; 

h1 { 
    margin-top: 68px !important; 
    text-align: center; 

    a { 
     color: #fff; 
     font-family: 'montserrat-semibold'; 
     border: 3px solid #fff; 
     padding: 11px 16px; 
     letter-spacing: 8px; 
     text-transform: uppercase; 

     &:hover { 
      text-decoration: none; 
      color: #fff; 
     } 

     &:active { 
      text-decoration: none; 
      color: #fff; 
     } 
    } 
} 

h2 { 
    text-align: center; 
    color: #fff; 
    font-family: 'montserrat-regular'; 
    letter-spacing: 5px; 
    margin-top: 40px; 
    font-size: 2.8em; 
} 

h3 { 
    text-align: center; 
    color: #fff; 
    font-family: 'montserrat-regular'; 
    letter-spacing: 5px; 
    margin-top: 26px; 
    margin-bottom: 26px; 
    font-size: 1.56em; 
} 

form { 
    background-color: #fff; 
    padding: 50px 15px; 
    border-radius: 6px; 
    padding-bottom: 25px; 
    overflow: hidden; 
} 

div.form-group input, .form-control { 
    height: 69px; 
    margin-bottom: 25px; 
    border: 1px solid #626262; 
} 

}

Это CSS верстку

, но проблема в форме части заголовка выходит и не знает, как я могу решить проблему

[http://gyazo.com/ef00bdc833ac1e1d26cd8423a132ecc2][1]

[1]: http://gyazo.com/ef00bdc833ac1e1d26cd8423a132ecc2 здесь `ы образ с проблемой.

Answer 1

Попробуйте это,

HTML: - (назначается ID)

<header id="thisHeader"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1 class="logo"><a href="#">Super Tramp</a></h1> 
       <h2 class="title">Sketch your next vacation route today</h2> 
       <h3 class="sub-title">The Best Landing Page Travel Website for your vacation.</h3> 
      </div> 
      <div class="col-md-4 col-md-offset-4 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3"> 
       <form> 
        <p class="info"> 
         Enter the required data and <br> 
         continue to choose the route. 
        </p> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="text" placeholder="Full Name"> 
        </div> 
        <div class="form-group"> 
         <input type="email" class="form-control" id="text" placeholder="Email Adress"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="text" placeholder="Phone Number"> 
        </div> 
        <button type="button" class="btn btn-primary submit">Request Vacation</button> 
       </form> 
      </div> 
     </div> 
    </div> 
</header> 

CSS (без изменений)

Добавить некоторые JQuery: -

$(document).reday(function(){ 
var clientHeight = $(window).height(); 
    $('#thisHeader').css('height', clientHeight); 

});