0

http://jsfiddle.net/eZt4J/を見るとわかるように、6 つのボックスがあり、フッターをそれらの下部に配置する方法を知りたいと思っていました。フッターをページの一番下に固定したい。

私が使用しているテンプレートはボイラープレートに基づいています。は閉園の#footer外側にありますのでご注意ください。</div>#container

CSS:

.w960 { width:960px; margin:auto; }
#holder{width:100%;height:600px;}
#container{width:960px;margin:0px auto 40px auto; background:red;}
.third{width:260px;height:350px;float:left;}
.third li {font-size:12px;}
#first-prac, #second-prac, #fourth-prac, #fifth-prac{margin-right:80px;}
.yellow h2{line-height: 36px;border-top: 3px solid #FFB400;color: #FFB400;}
.dark h2{line-height: 36px;border-top: 3px solid #444;color: #444;}
#footer{width:100%;clear:both; height:66px;background:#2d2d2f; bottom:0;}
#footerHolder{width:960px;margin:auto;}
.foot {color:#B8BBC1;font-size:11px;margin-top:30px;}
.foot a{color:#fff;}​

HTML:

    <div id="holder">
        <div id="first-prac" class="third left yellow">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
        <div id="second-prac" class="third left dark">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
        <div id="third-prac" class="third left yellow">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
        <div clear="clear"></div>
        <div id="fourth-prac" class="third left dark">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
        <div id="fifth-prac" class="third left yellow">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
        <div id="six-prac" class="third left dark">
            <h2>
                Text Heading
            </h2>
            <p>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </p>
        </div>
    </div>
<div clear="clear"></div>
        <div id="footer" class="w960">
            <div id="footerHolder">
                <div class="foot left"><a href="#">By</a> | &copy; {{ helper:date format="Y" }} | {{ settings:site_name }}</div>
            </div>
        </div>​
4

2 に答える 2

1

overflow: hidden「ボックスの高さで移動しない」ということで、フッター コンテナーを超えて伸びるコンテンツを参照している場合は、#container CSSに追加できるはずです。これにより、#container 内のフローティング アイテムがクリアされ、フッターがそれらを通過します。

ただし、そのクラス.thirdの静的を定義しているため、これによりコンテナーが短くなります。列の高さを柔軟にしたい場合は、このクラスからheight: 350pxを削除してください。height

オーバーフローと同様: http://jsfiddle.net/eZt4J/2/

.second static height を削除: http://jsfiddle.net/eZt4J/3/

于 2012-10-18T21:35:04.013 に答える
0

Google の「スティッキー フッター」。これは良い例です:

http://css-tricks.com/snippets/css/sticky-footer/

于 2012-10-18T21:23:08.780 に答える