css - 页脚不随框高移动

Question

如你所见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>​

Answer 1

如果您所说的“不随框高度移动”指的是延伸到页脚容器之外的内容，您应该能够将 overflow: hidden 添加到您的#container CSS 中。这将清除 #container 中的 float 项并将页脚推过它们。

然而，这将缩短您的 .third 容器，因为您已经为该类定义了静态 height: 350px。如果您希望列高灵活，只需从此类中删除 height。

与溢出一样: http://jsfiddle.net/eZt4J/2/

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