html - 内容高度 :auto not working

Question

我认为我可能编码错误(或者是用较短的方式编码)，我正在尝试弄清楚如何让 .content 包含所有元素都有一个自动高度，这取决于内容它。但是，当我使用 height:auto;对于内容，内容完全消失(它的高度消失或 .content 没有准确包含其中的元素。

在这里，它也会影响页脚。

.content {
   width:930px;
   background: #eeeeee;
   background: -moz-linear-gradient(top,  #eeeeee 0%, #f4f4f4 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f4f4f4));
   background: -webkit-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: -o-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: -ms-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
   background: linear-gradient(to bottom,  #eeeeee 0%,#f4f4f4 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4',GradientType=0 );
   border: 2px solid rgb(34, 178, 76);
   border: 2px solid rgba(34, 178, 76, .5);
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   height: 800px;
   margin: 93px auto;
   margin-bottom: 10px !important;
}

网站上线:http://nbtfootball.com.sg/wwfc

Answer 1

删除 height: 800px 并添加 overflow: auto。

问题是里面的 float 元素引起的。

.content {
  width:930px;
  background: #eeeeee;
  background: -moz-linear-gradient(top,  #eeeeee 0%, #f4f4f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#f4f4f4));
  background: -webkit-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -o-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: -ms-linear-gradient(top,  #eeeeee 0%,#f4f4f4 100%);
  background: linear-gradient(to bottom,  #eeeeee 0%,#f4f4f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4',GradientType=0 );
  border: 2px solid rgb(34, 178, 76);
  border: 2px solid rgba(34, 178, 76, .5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* height: 800px; REMOVE */
  margin: 93px auto;
  margin-bottom: 10px !important;
  overflow: auto; /* ADD */