HTML page height not taking full height of screen
<p>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:</p>

<p>Here is a <a href="http://dandoquote.iwobi.image-plus.co.uk/payment-test" rel="nofollow noreferrer">link</a> if you'd like to see it for yourself.</p>

<p><a href="https://i.stack.imgur.com/KSKiD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KSKiD.png" alt="enter image description here"></a></p>

<p>Here is the relevant section of my view file:</p>

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


      &lt;div class="row" style="margin-right:0px"&gt;

            &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
              &lt;h3&gt;Request a quote&lt;/h3&gt;

              &lt;p&gt;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. &lt;/p&gt;

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

            &lt;!-- This is the main section  --&gt;
            &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main get-a-quote-page"&gt;

            &lt;div class="top-bar" style="display:none"&gt;
              &lt;h3&gt;Request a quote&lt;/h3&gt;

              &lt;p&gt;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. &lt;/p&gt;

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

            &lt;/div&gt;  

            &lt;br&gt;
            &lt;br&gt;

            &lt;div class="col-md-8 payment-thankyou"&gt;
                &lt;h1 style="text-align:center"&gt;Thank you&lt;/h1&gt;
               &lt;p class="thankyou-text" style="text-align:center"&gt;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.&lt;/p&gt;
               &lt;br/&gt;
               &lt;p class="thankyou-text" style="text-align:center"&gt;Upon receipt of your payment we will issue your Policy Documents.&lt;/p&gt;

            &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>I have applied the following css to the <code>.main</code> class:</p>

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

<p>The <code>height:100%</code> 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?</p>