HTML make Sidebar same height as main section

Question

On my web page I have a sidebar section and a main content section, the height of the 2 sections are never equal (depending on the browser size).

You can see the webpage here.

How do I maintain equal height for both sections regardless of the browser size?

My sidebar section has class .sidebar and my main section has class .main.

Would appreciate any help.

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

Possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — Patrick Mlr, Nov 29 '16 at 13:25

score 0 · Answer 1 · answered Nov 29 '16 at 13:26

0

The reason is you gave your.sidebar a fixed height: 141vh and .main a height: 100%.

Give the .sidebar a height equal to that of .main meaning your .main should also have a height: 100% since you want them to have the same height.

answered Nov 29 '16 at 13:26

If I give them both a height of `100%` they still won't be equal height, you can see if you change it in the browser console. – user3574492 Nov 29 '16 at 13:29

score 0 · Answer 2 · answered Nov 29 '16 at 13:34

Remove from the .sidebar the inline style attribute, you don't need it. On the .row parent add class .myclass and add the rules under.

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

Also from the .sidebar remove all positional properties so it looks like

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

Finally on the two divs remove the unnecesary classes so they looks like:

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

Tested, works.

That completely screwed everything up – user3574492 Nov 29 '16 at 14:10 — user3574492, Nov 29 '16 at 14:10

score 0 · Answer 3 · answered Nov 29 '16 at 13:35

0

Make use of the Flex option:

display: flex;

Use this on a div around those 2 classes.
And put flex: 1;on your .main and .sidebar classes

This should make them the same height!

answered Nov 29 '16 at 13:35

Webdeveloper_Jelle

2,868
4
29
55

score 0 · Answer 4 · answered Nov 29 '16 at 13:38

You can use CSS Flexbox. But you need to change some classes in the layout.

Have a look at the snippet below:

/* 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;
}

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

Hope this helps!

HTML make Sidebar same height as main section

4 Answers4