자동 높이가 작동하지 않습니다.

Question

나는 운이없이 내 웹 사이트에서 작동하도록 노력하고 있습니다. 내 gray_content 상자의 높이는 그 안에 내용에 따라 자동으로 조정하지 않습니다 http://jsfiddle.net/w8Bn5/2/

CSS :

.gray_content { 
    height: auto; 
    background-color: #000; 
    padding: 20px; 
    margin: 0 -21px -21px -21px; 
    -moz-box-shadow: inset 0 2px 2px -2px #696868, 
         inset 0 -2px 2px -2px #696868; 
    -webkit-box-shadow: inset 0 2px 2px -2px #696868, 
         inset 0 -2px 2px -2px #696868; 
    box-shadow:  inset 0 2px 2px -2px #696868, 
         inset 0 -2px 2px -2px #696868; 
    border-left: 1px solid #d1d1d1; 
    border-right: 1px solid #d1d1d1; 
} 
ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 30px; 
    border-bottom: 1px solid #cccccc; 
    border-left: 1px solid #cccccc; 
    width: 100%; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 29px; 
    line-height: 29px; 
    border: 1px solid #cccccc; 
    border-left: none; 
    margin-bottom: -1px; 
    background: #f9f9f9; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #555555; 
    display: block; 
    padding: 0 20px; 
} 
ul.tabs li a:hover { 
    background: #fff; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { 
    background: #fff; 
    border-bottom: 1px solid #fff; 
} 
.tab_container { 
    border: 1px solid #cccccc; 
    border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    background: #fff; 
} 
.tab_content { 
    padding: 20px; 
} 

HTML : 당신은 당신의 .gray_content {}에 overflow:auto;을 추가 할 수 있습니다

<div class="gray_content"> 
    <ul class="tabs"> 
     <li><a href="#tab1">Tab1</a></li> 
     <li><a href="#tab2">Tab2</a></li> 
     <li><a href="#tab3">Tab3</a></li> 
    </ul> 
    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      Content 
     </div> 
     <div id="tab2" class="tab_content"> 
      Content 
     </div> 
     <div id="tab3" class="tab_content"> 
      Content 
     </div> 
    </div> 
</div> 

Answer 1

작동 중 DEMO