HTML页面高度没有占用屏幕的全部高度

我使用Bootstrap创建了一个带有侧边栏部分和主要内容部分的页面，如下所示，主要部分高度不占用页面的整个高度，而我只是无法弄清楚如何去做到这一点：HTML页面高度没有占用屏幕的全部高度

这是一个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>

我已经申请了以下CSS到.main类：

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

的height:100%少了点似乎在这里工作，任何想法如何我可以得到主要部分的高度（蓝色背景），以覆盖整个碎石N +

来源

2016-11-09 user3574492

[尝试此链接]（http://callmenick.com/post/css-equal-height-columns-three-different-ways） –

尝试使用vh代替%

vh = viewport height %

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

来源

2016-11-09 15:43:16 Federico

'高度：100vh'做了伎俩，虽然不知道这是多么兼容用不同的浏览器，像魅力一样工作。谢谢。 – user3574492

你可以在这里查看'vh'的支持：http://caniuse.com/#search=vh – Wabbitseason

你将不得不放弃了。主要的div无论是在像素的硬高度，而不是百分比，或者你可以添加高度：100vh ; vh = viewport height，这意味着div需要占用浏览器的高度。

此外div不占用浏览器的高度，因为它没有足够的内容来填充它，并使其更长。

来源

2016-11-09 15:48:42

我刚刚注意到你的网页上有一个滚动条在底部，你可以滚动左/右，这不应该发生，在通过检查元素看到你的代码后，我建议你删除你已经应用到.main div的边距，因为这是导致滚动的原因。 –

HTML页面高度没有占用屏幕的全部高度

回答

相关问题