html - 内容较多时如何展开wrapper？(使用CSS)

Question

我使用以下样式表:

html, body 
{
  height: 100%;
}
.wrapper 
{
  min-height: 100%;
  margin: auto;
  background: #fffcfc;
  width: 840px;
  padding:5px;
  box-shadow: 0px 0px 10px  #888888;
}
.content
{
  width:670px;
  float:right;
  padding:5px;
  border:solid 1px;
}
.left
{
  width:160px;
  float:left;
  vertical-align:top;
}
.footer
{
  height: 40px;
  background:#33559b;
  text-align:center;
  color: #ebe4e4;
  padding:10px;
  font-size:10pt;
  margin-top:10px;
 clear: both;
}

问题是当内容中的记录更多时，内容会展开但包装器不会展开并且高度固定。内容较多时如何展开wrapper？

输出:

Answer 1

将此 CSS 放入您的样式表中:

.clear { clear: both; }

然后在包装器 div 的结束标记之前放置一个清晰的 div。

<div class="wrapper">
 Your content
 <div class="clear"></div>
</div>