页脚不随盒高移动

时间：2012-10-18 21:20:41

标签： css html height footer

正如你所看到的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>​

2 个答案:

答案 0 :(得分：1)

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

但是，由于您为该类定义了静态.third，因此会缩短height: 350px个容器。如果您希望列高度灵活，请从此类中删除height。

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

删除第三个静态高度： http://jsfiddle.net/eZt4J/3/

答案 1 :(得分：0)

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

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

相关问题
最新问题