Css包装和容器分区自动高度？

Question

我想div div高度设置为auto。

http://bit.ly/rubikss1

在里面的div的底部是走出来。我想要底部div扩展到。

请帮忙！

body,html{height:100%} 
 

 
.wrapper{ 
 
\t width: 700px; 
 
     height: 100%; 
 
\t margin: 25px auto; 
 
     overflow:hidden; 
 
     position: relative; 
 
} 
 

 
.inner-container{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t float: left; 
 
\t border-radius: 5px; 
 
\t background: rgba(255,255,255,.5); 
 
\t position: relative; 
 
} 
 

 
.button-container{ 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: 35px; 
 
\t position: absolute; 
 
\t z-index: 2; 
 
} 
 

 
#prev, #next{ 
 
\t border: 0; 
 
\t background: #5CB85C; 
 
\t padding: 5px 10px; 
 
\t color: #fff; 
 
\t border-radius: 2px; 
 
\t cursor: pointer; 
 
\t font-size: 18px; 
 
} 
 

 
#next{ 
 
\t float: right; 
 
} 
 

 
#prev{ 
 
\t float: left; 
 
} 
 

 
#verilistesi{ 
 
\t float: left; 
 
\t width: 700px; 
 
     height: 100%; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 

 
#verilistesi .item-container{ 
 
\t width: 100%; 
 
\t float: left; 
 
} 
 

 
#verilistesi .item-container .item{ 
 
\t width: 500px; 
 
     height: 100%; 
 
\t background: rgba(0,0,0,.3); 
 
\t margin-bottom: 35px; 
 
\t margin-top: 50px; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
}

我的CSS。

我如何设置自动高度两个div？请给予帮助？

Answer 1

我认为这是你想要什么：

 body,html{height:100%} 

     .wrapper{ 
      width: 700px; 
      height: auto; 
      margin: 25px auto; 
      overflow:hidden; 
      position: relative; 
     } 

     .inner-container{ 
      width: 100%; 
      height: auto; 
      float: left; 
      border-radius: 5px; 
      background: rgba(255,255,255,.5); 
      position: relative; 
     } 

     .button-container{ 
      float: left; 
      width: 100%; 
      height: 35px; 
      position: absolute; 
      z-index: 2; 
     } 

     #prev, #next{ 
      border: 0; 
      background: #5CB85C; 
      padding: 5px 10px; 
      color: #fff; 
      border-radius: 2px; 
      cursor: pointer; 
      font-size: 18px; 
     } 

     #next{ 
      float: right; 
     } 

     #prev{ 
      float: left; 
     } 

     #verilistesi{ 
      float: left; 
      width: 700px; 
      height: auto; 
      position: relative; 
      overflow: hidden; 
     } 

     #verilistesi .item-container{ 
      width: 100%; 
      float: left; 
     } 

     #verilistesi .item-container .item{ 
      width: 500px; 
      height: 100%; 
      background: rgba(0,0,0,.3); 
      margin-bottom: 35px; 
      margin-top: 50px; 
      position: relative; 
      overflow: hidden; 
     }