頁腳不隨箱高移動

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中的浮動項目並將頁腳推過它們。

但是，這會將您的.third容器縮短，因爲您已爲該類定義了一個靜態的height: 350px。如果您希望列高度靈活，只需從該類中刪除height。

如同溢出： http://jsfiddle.net/eZt4J/2/

用。第三靜態高度去除： http://jsfiddle.net/eZt4J/3/

Answer 2

谷歌 '粘頁腳'。這是一個很好的例子：

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