div內的“拉伸”背景圖片-100％的高度

Question

我目前有兩列布局，其中包含一個頁眉和一個頁腳，這兩列是兩個DIV，這些DIV浮動然后清除。 我的目標是在兩個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-->  

我已經嘗試在contentholder DIV中使用min-height: 100%和height: auto ，但是這無法正常工作。

Answer 1

創建以下兩個選擇器：

.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/

而且我相信有關Faux Columns的這篇文章將幫助您開發背景列：

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

希望能有所幫助，

干杯!