1

我的 HTML 页脚在 CSS 中的位置不正确。

我相信这是因为我使用的是边框框，但我找不到任何使用边框框的页脚的教程。

CSS

    *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    .container {
        min-width: 400px;
        max-width: 1000px;
        width: 85%;
        min-height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 100px;
    }

    .footer {
        width: 100%;
        height: 100px;
        margin: 0;
        padding: 16px;
        /*position: absolute;
        bottom: 0;*/
        background-color: rgb(220, 224, 226);
    }

HTML

<body>
    <div class="container">
        <h2>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</h2>     <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fermentum fringilla bibendum. Fusce sit amet neque lobortis, fringilla ipsum eu, elementum metus. Donec a risus quis leo vulputate consectetur sit amet sed nibh. Nunc molestie nunc augue, a commodo metus vehicula in. Aenean ac justo ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam euismod varius nunc vel venenatis. Aenean sagittis, sem eget pretium bibendum, enim justo suscipit eros, at porta quam odio quis dolor. In facilisis elementum urna, sollicitudin dignissim sem aliquam lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae lacus sed neque egestas gravida vitae quis lectus.
            <br><br>
            <!--Vestibulum nunc metus, vehicula sit amet sagittis sed, convallis euismod purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eget erat nisl. Mauris volutpat massa at eros tempus, eu venenatis metus mattis. Phasellus tincidunt justo id facilisis elementum. Proin non enim id ipsum vulputate ornare vel in nisi. Mauris et pulvinar velit, sed sollicitudin lacus. Proin vel sapien sit amet neque tempus venenatis vitae id lectus. Integer tristique ornare mi, ac rhoncus mauris semper sed. Duis ut eros eu neque ornare ultrices. Cras venenatis risus lacinia metus dapibus venenatis. Sed eros diam, commodo et pulvinar in, eleifend quis enim. Aliquam ac arcu libero. Integer molestie velit eu velit vulputate, in auctor velit interdum.
            <br><br>
            Vestibulum tincidunt sollicitudin justo eget placerat. Vivamus condimentum vitae erat eu molestie. Curabitur sit amet mauris tincidunt, egestas quam ac, porttitor enim. Aenean ut lectus iaculis velit auctor rhoncus a at est. Morbi tempor adipiscing convallis. Praesent pretium lorem vitae lectus placerat, ut eleifend tellus molestie. Etiam laoreet vestibulum nibh non posuere. Maecenas mi nunc, suscipit vel purus vitae, malesuada scelerisque arcu. Suspendisse vel sagittis velit. Etiam tincidunt libero turpis, at fringilla leo ultrices eget. Curabitur auctor vehicula leo cursus pretium. Vestibulum faucibus velit in tortor dapibus, et feugiat odio semper.
            <br><br>
            Nullam iaculis sodales aliquet. Quisque ornare libero sed justo sagittis eleifend. Cras libero mi, dapibus vitae dolor vitae, placerat iaculis leo. Nulla porttitor lorem id lacus commodo mollis. Pellentesque eros neque, tincidunt sit amet gravida quis, pretium at lacus. Aenean pharetra luctus suscipit. Phasellus vitae sapien nisi. Fusce nisi leo, scelerisque eu imperdiet a, scelerisque in nulla. Cras iaculis mollis bibendum. Integer metus arcu, sodales quis ornare vel, pretium nec sem. Fusce eget tempor sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec condimentum felis a urna mattis, non elementum libero euismod. Ut id tempor elit, dapibus euismod turpis. Quisque eu metus risus. Integer suscipit sapien est, eu varius ligula hendrerit quis.-->
        </p>
    </div>
    <div class="footer">
        Footer
    </div>
</body>

正如我之前提到的，我认为这是因为我使用了边框框。

有谁知道如何解决？

4

2 回答 2

1

看这里：演示

<style>
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {      /* Here Html and Body */
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    /*position: absolute;
    left: 0;
    top: 0;*/    /* REMOVE THIS */
} 

.container {
    min-height: 100%;
    height: auto !important; /* Add this */
    margin: 0 auto -130px;   /* Do here the size of your footer */
    min-width: 400px;
    max-width: 1000px;
    width: 85%;
    display: inline-block;  /* Add this */

}

.footer {
    width: 100%;
    height: 130px;
    padding: 16px;
    background-color: rgb(220, 224, 226);
}

于 2013-09-20T16:48:25.730 回答
0

您将容器设置min-height为 100%，您应该从中挖掘页脚高度，这意味着min-height: calc(100% - 136px);您的页面将不会滚动，或者您可以通过添加位置来做到这一点：绝对到您的页脚，如下所示：

*, *:before, *:after {

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*position: absolute;
    left: 0;
    top: 0;*/
}

.container {
    min-width: 400px;
    max-width: 1000px;
    width: 85%;
    //min-height:  calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}

.footer {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 16px;
    position: absolute;
    bottom: 0;
    background-color: rgb(220, 224, 226);
}
于 2013-09-20T20:10:07.130 回答