Bootstrap even column height

Question

I am using bootstrap to make a homepage where I have a small header and a sidebar that I constructed. I want the body to be all one height. I originally had it written with overflow: hidden, but I do not want to do that as content will be pushed off the page on smaller screens and I want viewers to be able to view them. Currently, the bottom of the page looks like this: with the light green extending further than the sidebar. I want them to be the same height regardless of the window size. What I have noticed, which seems pretty self-explanatory, is that the light green extends the same amount as the header, but because it is a responsive layout, this amount changes. I have tried to use display: flex to no avail, I have tried table layout, I have tried to set the height to specific value and that does not work either. The HTML:

    <div class="container-fluid">
    <div class="row" id="headers">
        <div class="menu col-xs-3">
            <div>
                <div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div>
                <div class="col-xs-12 menu-item"><a>Portfolio</a></div>
                <div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div>
                <div class="col-xs-12 menu-item"><a>Contact</a></div>
            </div>
        </div>
        <div class="col-xs-9 main">
            <h1>Header</h1>
        </div>
        <div class="col-xs-9 content auto-content-div">
        </div>

and the CSS:

body, html {
    height: 100%;
    width: 100%;
}

#headers, .container-fluid {
   height: 100%;
}

.menu {
    background: url("http://www.space.com/images/i/000/041/737/original/milky-way-chile-praniski.jpg") no-repeat;
    height: 100%;
}

.main {
    background-color: #021615;
    text-align: center;
}

.menu-item:first-child {
    padding-top: 4.5em;
}

.menu-item {
    padding-top: 4em;
    text-align: center;
}

.content {
    height: 100%;
    background-color: rgba(12, 122, 86, 0.32) ;
}

PLEASE HELP!

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — A1raa, Nov 23 '16 at 09:31
I spent hours looking through stack overflow and as I mentioned here, that answer did not work. — CharStar, Nov 23 '16 at 16:59

A1raa · Answer 1 · 2016-11-23T19:57:55.207

The answer does work it's likely you just didn't understand the methods used. I put it inside a pen using your code.

https://jsfiddle.net/51hmyjpx/3/

<div class="container-fluid">
<div class="row" id="headers">
    <div class="menu col-xs-3">
        <div class="column">
            <div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div>
            <div class="col-xs-12 menu-item"><a>Portfolio</a></div>
            <div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div>
            <div class="col-xs-12 menu-item"><a>Contact</a></div>
        </div>
    </div>
    <div class="col-xs-9 main">
        <h1>Header</h1>
    </div>
    <div class="col-xs-9 content auto-content-div column">
    </div>

Add the column class to your the div wrapping any columns you want the same height and set padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100%.

.column {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Then we add overflow: hidden; to the container to hide it.

#headers, .container-fluid {
   height: 100%;
   overflow: hidden;
}

I'm not sure where you were going with your code as it looks odd when you hit the xs bootstrap viewport. You should give the nav column a min-width so it doesn't shrink to a width less than the space the text takes up but I'll leave that for you to decide.

Bootstrap even column height

1 Answers1