Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Wesley Picotte
Wesley Picotte
1,531 Points
Posted by Wesley Picotte
Wesley Picotte
1,531 Points

Get Fluid Columns to 100% Height

I have built base CSS3 and HTML5 templates using the grid system taught on Treehouse.

I'm unable to get the main content container (.content), as well as the fluid columns it contains, to span 100% height of the viewport when only a small amount of content exists on the page.

It should be noted that I'm using a sticky footer solution.

I have min-height 100% set to siteWrapper (the container that wraps everything except the footer) and height 100% set to content and the column containers within.

Please help - I've been trying to get this to work for a couple days.

Here's the HTML:

<html>
<body>
        <div class="siteWrapper">

           <header class="mainHeader gridContainer">
                <!--header content-->
            </header>

            <div class="content gridContainer">
                <div class="primaryContent grid-8 group">
                    <section>
                        <!--my content-->
                    </section>
                </div><!--end primaryContent-->

                <aside class="sideBar grid-4 group">
                    <!--my sidebar content-->
                </aside>
           </div><!--end content-->

        </div><!--end siteWrapper-->

        <footer class="mainFooter">
            <div class="footerInner">
                <p>This is the footer</p>
            </div><!--end footerInner-->
        </footer>

</body>
</html>

And the CSS:

/* Global
============================== */
html,
body {
        height:100%;
}

.siteWrapper {
        max-width:1140px;
        min-height:100%;
        margin: 0 auto;
        -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: content-box;    /* Firefox, other Gecko */
        box-sizing: content-box;
}

.content {
            overflow:auto;
            width:100%;
            margin:0 auto;
            padding-bottom: 100px; /* must be same height as the footer */
}

.mainFooter {
        position: relative;
        margin: -120px auto 0 auto; /* negative value of footer height */
        height: 120px;
        clear:both;
}

.primaryContent,
.sideBar {
        vertical-align:top;
}

.content,
.primaryContent,
.sideBar {
    height:100%;
}

.mainHeader,
.mainLogo,
.content,
.primaryContent,
.sideBar {
    display:inline-block;
}

/* Grid Styles
============================== */

.gridContainer {
    margin-left:auto;
    margin-right:auto;
}

@media screen and (min-width: 768px) {

    /* Columns
    ============================== */

    .gridContainer > [class^="grid-"] {
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .gridContainer > [class^="grid-"]:first-child {
        margin-left:0;
        padding-left:0;
    }

    .gridContainer > [class^="grid-"]:last-child {
        float: right;
        padding-right:0;
    }
    /* Clearfix
    ============================== */

    .group::after,
    .gridContainer::after {
        content:" ";
        display:table;
        clear:both;
    }

1 Answer

Mario Zampollo
Mario Zampollo
11,292 Points
Mario Zampollo
Mario Zampollo
11,292 Points

I am trying to solve the same problem. I've found different "tricks" to achieve equal boxes heights in a grid layout (i.e. http://css-tricks.com/fluid-width-equal-height-columns/ or http://www.vanseodesign.com/css/equal-height-columns/), but I just can't get why setting boxes' height property to 100% doesn't work as fine as it does with boxes' width.