bootstrap equal height divs (Responsive Design)

Question

I have a side-bar div that will have ads. It should have a fixed width of about 333px and need it to be responsive is possible in its height.

It has a background but when content loads in the main div the side-bar div will not extend the length of the main content. I have tried a few things but get varied results in different browsers.

When in the mobile view or when it's in a small view the side bar should fit to the size of the window width wise and only be has high as the content in the side-bar.

I have loaded a few images for examples to show what I need.

Below is the ccs I have

.main
{
  padding: 20px;
}
.side-bar
{
    background-image: url('../images/BlueBG.jpg');
    width: 333px;
    display: block;
    height: 100%;
}

enter image description here

have you checked: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — chris, May 16 '15 at 01:43

score 1 · Answer 1 · answered May 16 '15 at 04:06

This has been asked a few times on SO, but you can use flexbox for this. If you are using bootstrap, you most likely will have a container-fluid class. Simply set the display to flex and all the items inside will become flex-items. This will allow you to have them stretch. In your case, you will have to set container-fluid back to block or set your main and side-bar to flex-basis:100% in a media query for your mobile.

Here's the fiddle: http://jsfiddle.net/56we9rmj/2/

HTML

<div class="container-fluid">
<div class="main"><p>Arcu dictumst nec ultricies aptent rhoncus. Sed fermentum ligula. Donec vitae felis. Lectus nec ad. Tempus et quam. Nec dolor eu. Lacus at in eu dolor penatibus. Quis vivamus vehicula. Mauris dui ullamcorper diam eget pretium lectus consectetuer ultrices tincidunt sit nulla. Lobortis lacus et. Dolor ea placerat etiam diam aenean integer nec erat. Suscipit ut elementum. Consectetuer dui id vestibulum cras egestas. Quis nulla nulla. Pariatur pellentesque amet taciti neque lorem fermentum vehicula amet elit blandit pellentesque. Cras sit gravida. Cras vulputate curabitur mauris purus semper mauris lacus et et pulvinar in justo nullam qui sed quam massa. Integer amet ullamcorper. Feugiat quis sed quam fusce non feugiat amet vitae. Arcu elementum eget justo ac sed quis id tellus.</p>

    <p>Vivamus non cras. Turpis in eleifend mattis nam arcu aliquam vulputate felis. Dignissim ligula dignissim habitant nonummy proin. Mauris varius varius. Purus lorem ullamcorper dictum cras in felis ullamcorper vitae. Nunc amet interdum nec adipiscing tempus ac vestibulum primis. Nisl purus orci sed sunt mauris. Odio donec nulla. Pellentesque arcu felis. Et varius ornare eros id quisque. Vel dui velit arcu eget in dignissim nunc nec habitasse habitasse elit quis ac aptent duis volutpat facilisis varius ut sem consectetuer erat arcu. Mauris condimentum sodales luctus a ullamcorper amet a pellentesque tellus ac sit. Nam mauris nulla neque aenean tempus. Mi dui ipsum. Laoreet vitae mauris. Arcu at tristique. Quia mi praesent nibh eu est. Dui libero condimentum elementum risus risus. Ut feugiat diam. Quam semper erat felis ultricies vel. Sed proin sollicitudin. Etiam eleifend morbi imperdiet purus pharetra. Vel diam feugiat. Vel volutpat vulputate. Enim ligula fringilla at nunc risus.</p>
</div>
<div class="side-bar">
    <img src="http://placehold.it/300x100" />
    <img src="http://placehold.it/300x100" />
</div>
</div>

CSS

.container-fluid {
    display:flex;
    align-items:stretch;
    align-content:stretch;
}

.main {
    flex-basis:66.66666667%;
    padding:20px;
}

.side-bar {
    background:red;
    flex-basis:33.3333333%;
}

.side-bar img {
    width:100%;
}
@media screen and (max-width:Mobile-PX-HERE) {
.container-fluid {
    flex-wrap:wrap;
 }
    .main, .side-bar {
        flex-basis:100%;
     }
}

Hope that helps!

score 0 · Answer 2 · answered May 16 '15 at 04:15

Giving position:absolute; and 100% height to the sidebar will do. http://jsfiddle.net/fdf01y4b/
Resize the window or add more text to see it in action

.side-bar {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

If you have problems with the sidebar going out of the parent div, just give position:relative; to the parent wrapper like I did on the Jsfiddle example

<div class="wrapper">
    <div class="main">Content</div>
    <div class="side-bar">Sidebar</div>
</div>

.wrapper{
    position:relative;
}

For smaller screens you can just remove the sidebar position:absolute; to position:initial; with media queries:

@media (max-width: 600px){
    .side-bar{
        position: initial;
    }
}

bootstrap equal height divs (Responsive Design)

2 Answers2