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/

删除 .third 静态高度：http: //jsfiddle.net/eZt4J/3/

于 2012-10-18T21:35:04.013 回答
0

谷歌“粘性页脚”。这是一个很好的例子：

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

于 2012-10-18T21:23:08.780 回答