'伸展'的div內的背景圖像 - 100％的高度

Question

我目前有一個頁眉和頁腳的兩列布局，兩列是浮動，然後清除兩個DIVs。我的目標是在兩個DIV背後有一個背景，並將其「100％」延伸到頁面的頁腳。

我有兩個DIV（左側和右側內容），我有另一個DIV圍繞這兩個div（內容持有者），這是將持有我的背景圖像。只要我有兩個浮動DIV的內容，它正在擴展。

我當前的CSS代碼如下：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, #wrap { 
    height: 100%; 
} 

body > #wrap { 
    height: auto; 
    min-height: 100%; 
} 

#container { 
    width: 1500px; 
    min-height: 100%; 
    margin: auto; 
} 

#header { 
    overflow: hidden; 
    background-color: red; 
    height: 100px; 
} 

#contentholder { 
    background-color: #FFE303; 
    min-height: 100%; 
} 

#contentleft { 
    float: left; 
    width: 18.7%; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #698B22; 
} 

#contentright { 
    float: left; 
    width: 80%; 
    background-color: #964514; 
} 

.clear { 
    clear: both; 
} 

#footer { 
    position: relative; 
    margin-top: -60px; /* same as height */ 
    height: 60px; /* same as padding-bottom and margin-top */ 
    clear: both; 
    background-color: pink; 
} 

#contentmain { 
    padding-bottom: 60px; /* must be the same height as footer */ 
} 

而我的HTML代碼：

<div id="wrap"> 

<div id="container"> 

    <div id="header"></div><!--end header--> 

    <div id="contentmain"> 

     <div id="contentholder"> 

    <div id="contentleft"></div><!--contentleft--> 

    <div id="contentright"></div><!--contentright--> 

    <div class="clear"></div><!--clear--> 

    </div><!--content main--> 
     </div><!--content holder-->  

</div><!--container--> 

</div> 

    <div id="footer"></div><!--footer--> 

使用min-height: 100%和height: auto的contentholder DIV內我已經嘗試過，但是這並沒有正常工作。

Answer 1

創建這2種選擇：

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display:block; 
} 

然後.clearfix類追加到要運行下來的頁面的容器。

您還可以使用：

overflow: hidden; 

如果它不會與該網站的其他功能干擾。

Answer 2

這clearfix風格，我發現效果很好，它的短：

http://nicolasgallagher.com/micro-clearfix-hack/

我相信這篇文章對人造列將幫助您開發背景列：

http://www.alistapart.com/articles/fauxcolumns/

希望幫助，

乾杯！