0

以前有人问过这个问题，现在我也问过，因为我还没有找到一个有效的跨浏览器示例。

目前我正在研究一个跨平台的粘性页脚，但是我遇到了一个我无法完全理解的错误（见最后的图片）

http://mnrb.dk/template-2-test/

HTML 

<div id="wrapper">

    <div class="row possible-width" style="margin: 0 auto;">
        <div class="small-12 columns">
            <h1>A row in a div</h1>

        </div>
    </div>

        <div class="row full-width margin-reset" id="copyright">
            <footer>
                <div class="row possible-width margin-reset">
                    <h1>Le sticky footer</h1>
                    <h2>h2 test</h2>
                    <h3>h3 test</h3>
                </div>

                <div class="row full-width margin-reset">
                    <div class="row possible-width">
                        <p class="padding-reset margin-reset">&copy; 2015 <span>Spaceholder</span></p>
                    </div>
                </div>
            </footer>
        </div>

</div>

<!-- Style site js -->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/adjust-classes.js"></script>

<script>
    $(document).foundation();
</script>

</body>

CSS

/*###############*/
/*Global settings*/
/*###############*/
html, body {
    height: 100% !important;
}

h1, h2, h3, h4, p {
    margin: 0px 0px 5px 0px;
}


/*###########################*/
/*Custom foundation 5 classes*/
/*###########################*/
/*Adjust row width*/
.row.full-width {
    width: 100%;
    max-width: 100%;
}

div.row.possible-width, hr.possible-width {
    width: 75%;
    max-width: 75%;
}

/*#####################*/
/*Sticky footer - Setup*/
/*#####################*/
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#wrapper > div:last-of-type {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

        -webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;

-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;

-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;

    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

#copyright footer {
    width: 100%;
    height: auto;

    background-color: hsl(195, 100%, 29%);
}

#copyright footer * {
    color: hsl(0, 0%, 100%);
}

/*Second div in footer*/
#copyright footer > div:nth-child(2) {
    background-color: hsl(0, 0%, 13%);
    height: 50px !important;
}

#copyright footer div:nth-child(1), #copyright footer div:nth-child(2) > div {
    margin: 0 auto;
}


#copyright footer > div:nth-child(2) p {
    margin: 0;
    padding: 0;
    line-height: 50px;
    color: hsl(26, 0%, 60%);
}

#copyright footer div:nth-child(2) p span {
    color: hsl(26, 0%, 40%);
}

Chrome 中的问题 Chrome 中的问题

4

0 回答 0