user3574492 user3574492 - 24 days ago 12
CSS Question

HTML page height not taking full height of screen

I am using Bootstrap to create a page with a sidebar section along and a main content section as shown below, the main section height does not take the full height of the page and I just can't figure out how to get it to do that:

Here is a link if you'd like to see it for yourself.

enter image description here

Here is the relevant section of my view file:

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


I have applied the following css to the
.main
class:

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


The
height:100%
just doesn't seem to work here, any ideas how I can get the height of the main section (blue background) to take cover the entire screen?

Answer

Try using vh instead of %

vh = viewport height %

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