footer绝对定位但是不在页面最下边解决方案

Posted web倩倩

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了footer绝对定位但是不在页面最下边解决方案相关的知识，希望对你有一定的参考价值。

方案一

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 80px; /* .footer 的高度，为 footer 占位 */
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

方案二

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
        }
        #page {
            padding-bottom: 60px;/*高度等于footer的高度*/
        }
        #footer {
            position: relative;
            margin-top: -60px;/*等于footer的高度*/
            height: 60px;
            clear:both;
            background: red;
        }

        #header {
            padding: 10px;
            background: lime;
        }
        #left {
            width: 18%;
            float: left;
            margin-right: 2%;
            background: blue;
        }
        #content{
            width: 60%;
            float: left;
            margin-right: 2%;
            background: green;
        }
        #right {
            width: 18%;
            float: left;
            background: blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div id="page" class="clearfix">
        <div id="left">Left sidebar</div>
        <div id="content">Main contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi blanditiis, consequuntur dolorem ea eos magnam necessitatibus numquam, quaerat quia quod rem sint unde. Deserunt dolorum laboriosam minus repellat veniam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci architecto, blanditiis cumque doloremque, ea earum et maxime non pariatur quas quia quibusdam recusandae similique sit soluta tempora voluptas voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem ea impedit ut vel. Aut culpa exercitationem incidunt itaque non, nulla saepe voluptas. Inventore, molestiae perferendis provident quaerat ullam veniam.
         pisicing elit. Accusamus cupiditate facilis fugit inventore iste itaque iusto modi, natus nobis numquam obcaecati odio odit optio ratione sit ullam veniam vero. Vero.
       </div>
        </div>
</div>
<div id="footer">Footer </div>
</body>
</html>

　　

以上是关于footer绝对定位但是不在页面最下边解决方案的主要内容，如果未能解决你的问题，请参考以下文章

底部粘连(stiky footer)布局

将footer固定在页面最下方

两种方式实现sticky footer绝对底部

解决悬浮的<header><footer>遮挡内容的处理技巧

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

sticky-footer的三种解决方案