0

こんにちは、コンテンツ div をオーバーラップせず、Java スクリプトを使用せずに、フッターを下部に固定するリキッド コンテンツ コンテナを作成する方法を知っている人はいますか?

私はマシュー・ジェームス・テイラーのスティッキー・フッターを使用していますが、これは良い解決策ですが、私が使用しているレイアウトにはありません。

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

1 に答える 1

0

純粋な CSS ソリューションは最初のページ読み込みには機能するかもしれませんが、ユーザーがページのサイズを変更した瞬間にフッターが移動します。jQueryを使用することをお勧めします。戦略は、関数を定義し、DOM がロードされたとき、および .resize() イベントが発生したときに呼び出すことです。

于 2013-09-15T00:26:18.373 に答える