Question

我目前有一个带有页眉和页脚的两列布局，两列是浮动然后清除的两个DIV。我的目标是在两个DIV背后有一个背景，并将它向下延伸到页面的页脚“。”

我有两个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% DIV中使用height: auto和contentholder，但这无法正常使用。

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/

希望有所帮助，

干杯！

div中的'拉伸'背景图像 - 100％高度

2 个答案: