HTML使侧边栏与主要部分高度相同

Question

在我的网页上，我有一个侧边栏部分和一个主要内容部分，这两个部分的高度永远不相等(取决于浏览器大小)。

可以看到网页here .

无论浏览器大小如何，如何使两个部分保持相同的高度？

我的侧边栏部分有 .sidebar 类，我的主要部分有 .main 类。

非常感谢任何帮助。

 <div class="row" style="margin-right:0px">
            <!-- SIDBAR -->
            <div class="col-sm-3 col-md-2 sidebar" style="height: 141vh;bottom: initial;">
                <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="http://dandoquote.iwobi.image-plus.co.uk/images/residentsline-insurance-brokers.png" class="img-responsive residents-line-logo-sidebar img-thumbnail" alt="Responsive image">
            </div>
             <!-- MAIN-->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main get-a-quote-page" style="height:100%">


                <form method="POST" action="http://dandoquote.iwobi.image-plus.co.uk/quote-summary" accept-charset="UTF-8" id="quote-request-form" class="form-horizontal quote-request-form"><input name="_token" type="hidden" value="SP51CFwKItIrZli4AGf2H4GxhlXz7ofV6eAJibTU">



                <div class="form-group">
                    <label for="units" class="col-md-2 control-label" placeholder="#">Number of flats or properties</label>

                    <div class="col-md-4">
                        <input class="form-control" name="units" type="number" id="units">
                    </div>
                </div>


                <div class="form-group">
                    <label for="limit_of_indemnity" class="col-md-2 control-label">Limit of indemnity</label>
                    <div class="col-md-4">
                        <select class="form-control" id="limit_of_indemnity" name="limit_of_indemnity"><option value="100000">£100,000</option><option value="250000">£250,000</option><option value="500000">£500,000</option><option value="1000000">£1,000,000</option><option value="2000000">£2,000,000</option></select>
                    </div>
                </div>

            <div class="form-group">
                <label for="title" class="col-md-2 control-label">Title</label>

                <div class="col-md-4">
                    <select class="form-control" id="title" name="title"><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option><option value="Dr">Dr</option></select>
                </div>
            </div>


            <div class="form-group">
                <label for="block_address_county" class="col-md-2 control-label">County</label>
                  <div class="col-md-4">
                        <input class="form-control" placeholder="County" name="block_address_county" type="text" id="block_address_county">

                  </div>
            </div>
            <div class="form-group">
                <label for="block_address_post_code" class="col-md-2 control-label">Post Code</label>
                  <div class="col-md-4">
                        <input class="form-control" placeholder="Post Code" name="block_address_post_code" type="text" id="block_address_post_code">

                  </div>
            </div>



            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input class="btn btn-primary btn-quote-submit" type="submit" value="Submit">
                </div>
            </div>

        </form>


        </div>
    </div>

Answer 1

原因是你给你的.sidebar 一个固定的height: 141vh 和.main height: 100%。

给 .sidebar 一个等于 .main 的高度意味着你的 .main 也应该有一个 height: 100 % 因为您希望它们具有相同的高度。