浮动，流动儿童的100％高度*和*父母

Question

我采用流畅的网格设计，结合了粘性页脚解决方案。一切正常，但网格容器，基本上是一个类“内容”的内包装，将不会保持其父级“siteWrapper”的高度。因此，内容中的流动儿童也不会。

我一直在研究这个问题的时间比我不承认没有成功，所以我在这里发帖。如果您有任何想法，请告诉我。

这是HTML结构：

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

这是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: 120px; /* 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;
    }