html - 带液体容器的粘性页脚

Question

你好，有人知道我如何构建一个液体内容容器，让页脚卡在底部而不与内容 div 重叠并且不使用 Java 脚本吗？

我正在使用 Matthew James Taylor 的粘性页脚，这是一个很好的解决方案，但不是我使用的布局。

当我将内容 div #body 设置为 min-height: 100%;然后它与页脚重叠。使用最小高度时 min-height: 700px;那么它不是液体。有谁知道我该如何解决这个问题？

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;    /* Height of the footer */

    position: absolute;
    min-height: 700px;

    width: 800px;
    background: #ccc;
    margin: auto;

}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;            /* Height of the footer */
    background:#6cf;
}
/* other non-essential CSS */
#header p,
#header h1 {
    margin:0;
    padding:10px 0 0 10px;
}
#footer p {
    margin:0;
    padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
    height:100%;
}
</style>
<![endif]-->



<div id="container">   
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

额外的

我尝试了一种新方法，但现在大量内容从 div 中流出。我已经尝试过 clearfix，但它不起作用。

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body, html {
        height: 100%;
    }

    #container {
        background: #000;
        width: 700px;
        margin: 0 auto;
        position: relative;
        height: auto !important;
        min-height: 100%;
        height: 100%;
    }

    #content {
        padding-bottom: 100px;
    }

    #footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
    }
    #header {
        position: absolute;
        left: 0;
        top: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
    }

    #inner {
        position: absolute;
        top: 100px;
        bottom: 120px;
        left: 0px;
        width: 100%;
        background-color: #9BC9D1;
    }
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

    .clearfix {
        *zoom: 1;
    }
</style>

HTML

<div id="container">
    <div id="header">
        Header
    </div>
                <div id="content" >







            <div id="inner">
                Content<br>
                Content<br>

                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>

                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>


            </div>



                </div>
    <div id="footer">
        Footer here
    </div>        
</div>

Answer 1

纯 CSS 解决方案可能适用于初始页面加载，但当用户调整页面大小时，页脚将移动。我建议使用 jQuery。该策略是定义一个函数，并在加载 DOM 和触发 .resize() 事件时调用它。