HTMLページの高さが画面の高さに達していない

Question

私はブートストラップを使用してサイドバーセクションとメインコンテンツセクションを含むページを作成しています。メインセクションの高さはページの高さ全体を占めるわけではありません。

あなたがそれを見たい場合はここにlinkがあります。ここで

私のビューファイルの関連セクションです：

<div class="header"> 
       <a href="{{ URL::to('/') }}"> <img src="{{ URL::to('/') }}/images/new-logo.png" class="img-responsive logo" alt="Responsive image"></a> 
    </div> 


     <div class="row" style="margin-right:0px"> 

      <div class="col-sm-3 col-md-2 sidebar"> 
       <h3>Request a quote</h3> 

       <p>To obtain a quotation simply take two minutes to complete our form. Our policies are all underwritten by AVIVA Insurance and arranged through Residentsline Limited. </p> 

       <img src="{{ URL::to('/') }}/images/residentsline-insurance-brokers.png" class="img-responsive residents-line-logo-sidebar img-thumbnail" alt="Responsive image"> 
      </div> 

      <!-- This is the main section --> 
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main get-a-quote-page"> 

      <div class="top-bar" style="display:none"> 
       <h3>Request a quote</h3> 

       <p>To obtain a quotation simply take two minutes to complete our form. Our policies are all underwritten by AVIVA Insurance and arranged through Residentsline Limited. </p> 

       <img src="{{ URL::to('/') }}/images/residentsline-insurance-brokers.png" class="img-responsive residents-line-logo-sidebar img-thumbnail" alt="Responsive image"> 

      </div> 

      <br> 
      <br> 

      <div class="col-md-8 payment-thankyou"> 
       <h1 style="text-align:center">Thank you</h1> 
       <p class="thankyou-text" style="text-align:center">Thank you for your kind instructions, please find below your letter confirming cover along with your Statement of Fact and Invoice. The documents are also being emailed to you.</p> 
       <br/> 
       <p class="thankyou-text" style="text-align:center">Upon receipt of your payment we will issue your Policy Documents.</p> 

      </div> 

      </div> 
     </div> 

私は.mainクラスに次のCSSを適用しています

.main { 
    background: #e6edf5; 
    margin-right: 0px; 
    padding-right: 0px; 
    padding-top: 45px; 
    height: 100%; 
} 

height:100%だけでありません私はここで働くように思える、どのように私はメインセクション（青い背景）の高さを取得することができます全体のスカイをカバーするn？

Answer 1

することはあなたが割合とは対照的に、.main divのいずれかをピクセル単位でハードの高さを与える必要があります代わりに%

vh = viewport height %

.main { 
    background: #e6edf5; 
    margin-right: 0px; 
    padding-right: 0px; 
    padding-top: 45px; 
    height: 100vh; 
} 

Answer 2

のvhを使用してみてくださいか、高さを追加することができます。100VHを; vh =ビューポートの高さです。つまり、divがブラウザの高さを占める必要があります。

また、divを埋めて内容を長くして長くするため、divはブラウザの高さを占めていません。