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%，因为您希望它们具有相同的高度。

Answer 2

从.sidebar内联样式属性中删除，您不需要它。在.row父级添加班级.myclass上添加规则。

.myclass {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

同样来自.sidebar删除所有位置属性，使其看起来像

.sidebar {
    z-index: 1000;
    display: block;
    padding: 20px;
    background-color: #4b6db9;
    border-right: 1px solid #eee;
}

最后在两个div上删除不必要的类，使它们看起来像：

<div class="col-sm-3 col-md-2 sidebar">
<div class="col-sm-9 col-md-10 main get-a-quote-page">

经过测试，有效。

Answer 3

使用Flex选项：

display: flex;

在这两个类的div上使用它。
并将flex: 1;放在.main和.sidebar类

上

这应该使它们的高度相同！

Answer 4

您可以使用 CSS Flexbox 。但是你需要在布局中更改一些类。

请看下面的代码段：

＆＃13;

/* Flex Container */
.layout-holder {
  display: flex;
}

/* Sidebar (Left) */
.sidebar {
  width: 35%;
  background: skyBlue;
  padding: 20px;
}

/* Main Layout (Right) */
.main {
  flex: 1;
  background: #eee;
  padding: 20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="layout-holder">
            <!-- SIDBAR -->
            <div class="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="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="main get-a-quote-page">


                <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>

＆＃13;

希望这有帮助！

HTML使侧边栏与主要部分

4 个答案: