简体   繁体   中英

HTML CSS Footer at the bottom

My HTML footer isn't positioned correctly in CSS.

I believe it is because I am using border-box, but I couldn't find any tutorials for using footers with border-box.

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>

As I mentioned earlier, I think it's due to the fact that I'm using border-box.

Anyone know how to fix?

See here the: 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);
}

you set container min-height to 100%,you should mines footer height out of it,it means 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 :

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM