Question

我认为我可能编码错误（或者做得很短），我试图弄清楚我是如何使.content保持所有元素都有一个自动高度依赖于什么在它。但是，当我使用高度：auto;对于内容，内容完全消失（要么它的高度消失，要么内容没有准确地包含其中的元素。

这里也会影响页脚。

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

问题是由其中的浮动元素引起的。

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

}

Answer 2

您无需添加height: auto，因为它是默认值。

原因是因为您不清楚具有float: right或float: left样式的元素的浮动。尝试在浮动元素上使用clear: both或使用clearfix

更好

内容高度：自动无法正常工作

2 个答案: