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（）事件时调用它。

粘液页脚与液体内容容器

附加

1 个答案: