底部的HTML CSS页脚

Question

My HTML footer isn't positioned correctly in CSS. 我的HTML页脚在CSS中的位置不正确。

I believe it is because I am using border-box, but I couldn't find any tutorials for using footers with border-box. 我相信这是因为我使用的是border-box，但找不到任何有关将footer与border-box一起使用的教程。

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

As I mentioned earlier, I think it's due to the fact that I'm using border-box. 正如我之前提到的，我认为这是由于我使用的是border-box。

Anyone know how to fix? 有人知道如何解决吗？

Answer 1

See here the: DEMO 看到这里： DEMO

<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);
}

Answer 2

you set container min-height to 100%,you should mines footer height out of it,it means min-height: calc(100% - 136px); 您将容器的min-height设置为100％，则应从其中挖掘页脚高度，这表示min-height: calc(100% - 136px); and then your page will not be scrolled ,or you can do this by adding position:absolute to your footer,like this : 然后您的页面将不会滚动，或者您可以通过在页脚中添加position：absolute来完成此操作，如下所示：

*, *: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);
}

底部的HTML CSS页脚

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-09-20 16:48:25

解决方案2
0 2013-09-20 20:10:07

底部的HTML CSS页脚

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-09-20 16:48:25

解决方案2 0 2013-09-20 20:10:07

解决方案1
1 已采纳 2013-09-20 16:48:25

解决方案2
0 2013-09-20 20:10:07