2016-11-09 196 views
0

我使用Bootstrap創建了一個帶有側邊欄部分和主要內容部分的頁面,如下所示,主要部分高度不佔用頁面的整個高度,而我只是無法弄清楚如何去做到這一點:HTML頁面高度沒有佔用屏幕的全部高度

這是一個link如果你想自己看到它。

enter image description here

這裏是我的視圖文件的相關部分:

<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 +

+0

[嘗試此鏈接](http://callmenick.com/post/css-equal-height-columns-three-different-ways) –

回答

1

嘗試使用vh代替%

vh = viewport height %

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

'高度:100vh'做了伎倆,雖然不知道這是多麼兼容用不同的瀏覽器,像魅力一樣工作。謝謝。 – user3574492

+0

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

0

你將不得不放棄了。主要的div無論是在像素的硬高度,而不是百分比,或者你可以添加高度:100vh ; vh = viewport height,這意味着div需要佔用瀏覽器的高度。

此外div不佔用瀏覽器的高度,因爲它沒有足夠的內容來填充它,並使其更長。

+0

我剛剛注意到你的網頁上有一個滾動條在底部,你可以滾動左/右,這不應該發生,在通過檢查元素看到你的代碼後,我建議你刪除你已經應用到.main div的邊距,因爲這是導致滾動的原因。 –

相關問題