Question

我正在使用Bootstrap来创建一个带有侧边栏部分的页面和一个主要内容部分，如下所示，主要部分高度不占用页面的整个高度，我只是无法弄清楚如何得到它：

如果您想亲自看到，请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%似乎没有在这里工作，任何想法如何让主要部分（蓝色背景）的高度覆盖整个屏幕？

Answer 1

尝试使用vh代替.main { background: #e6edf5; margin-right: 0px; padding-right: 0px; padding-top: 45px; height: 100vh; }

{{1}} = viewport height %

{{1}}

Answer 2

你必须给.main div一个硬的高度，以像素为单位，而不是百分比，或者你可以添加高度：100vh; vh =视口高度，这意味着div需要占用浏览器的高度。

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

HTML页面高度未达到屏幕的全高

2 个答案: