自动高度不起作用，只有最小高度

Question

我有页面上的元素，在那里我需要设置height: auto，但它不按我想要的方式工作。只有min-height有效，但当它更大时，文本会转到下一个元素。重要的是，我正在重新下载模板。其他地方height: auto工作，但不在这里。我包含下面的代码。我已经尝试过overflow: auto;但它只是增加了滚动条在min-height值的大小...

HTML：

<section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates --> 
     <div class="parallax" data-velocity="-.3" data-fit="0"> 

      <div class="front-content dates"> 
       <h1>Koncerty</h1> 
       <div class="spacer"></div> 
       <div class="dates-wrapper"> 
        <ul> 
         <li> <!-- List #2 --> <!-- max 5 Date Info elements per li --> 
          <div class="date-box"> <!-- Date Info 1 --> 
           <div class="info date"> 
            <div class="day">15</div> 
            <div class="month">zář</div> 
            <div class="year">2015</div> 
           </div> 
           <div class="info"> 
            <div class="city">Mladá Boleslav</div> 
            <div class="place"><div class="ico"></div>Nádvoří hradu</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>19:00 - 20:00</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 1 --> 

          <div class="date-box"> <!-- Date Info 2 --> 
           <div class="info date"> 
            <div class="day">11</div> 
            <div class="month">úno</div> 
            <div class="year">2016</div> 
           </div> 
           <div class="info"> 
            <div class="city">Plzeň</div> 
            <div class="place"><div class="ico"></div> 
            Pod Lampou</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>20:30 - 21:30</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 2 --> 

          <div class="date-box"> <!-- Date Info 3 --> 
           <div class="info date"> 
            <div class="day">24</div> 
            <div class="month">úno</div> 
            <div class="year">2016</div> 
           </div> 
           <div class="info"> 
            <div class="city">Praha</div> 
            <div class="place"><div class="ico"></div>Vagon</div> 
           </div> 
           <div class="info"> 
            <div class="time"><div class="ico"></div>21:00 - 22:00</div> 
            <div class="buy"><div class="ico"></div><a href="#">FB událost</a></div> 
           </div> 
           <div class="clear"></div> 
          </div> <!-- end Date Info 3 --> 


         </li> 

        </ul>  

       </div> 

      </div> 

      <div class="overlay"></div> 
     </div> 
    </section><!-- end Tour Dates --> 

CSS：

#dates>div:nth-of-type(1) { 
    background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed; 
    background-color: #333333; 
    margin: 0; 
    height: auto !important; 
    min-height: 200px; 
    position: relative; 
    width: 100%; 
    text-align: center; 
/* background-size: 100%;*/ 

    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    -webkit-background-size: cover !important; 
    -khtml-background-size: cover !important; 
} 
.parallax-wrapper.dates { 
    height: auto; 
    min-height: 200px; 
    position: static; 
    width: 100% !important; 
    /*min-width: 1000px;*/ 
    margin: 0; 
    padding: 0; 
} 

.parallax-wrapper.dates h1 { 
color: white; 
} 

.front-content.dates{ 
    width: 500px; 
    margin-left: -250px; 
} 
.dates-wrapper{ 
    width: 600px; 
    height: auto; 
    min-height: 200px; 
    position: relative; 
    overflow: hidden; 
    margin-left: 10px; 
} 
.dates-wrapper ul li{ 
    float: left; 
    width: 600px; 
} 

.date-box{margin-bottom: 12px;} 
.date-box:last-child{margin-bottom: 0;} 
.date-box .info{ 
    float: left; 
    text-align: left; 
    padding-left: 10px; 
    color: #bbb; 
    max-width: 170px; 
    overflow: hidden; 
    font-size: 14px; 
} 
.date-box .info div{position: relative;} 
.date-box .info.date{ 
    width: 65px; 
    height: 80px; 
    background: #ee6c00; 
    color: #fff; 
    text-align: center; 
    padding-left: 0; 
} 

Answer 1

解决了！我不得不添加例外.front-content类，因为只有这样的：

.front-content{ 
    position: absolute; 
    left: 50%; 
    z-index: 5; 
} 

所以我不得不编辑就为.dates块：

.front-content.dates{ 
    position: relative; 
    z-index: 5; 
    padding: 5px 10px 25px 10px; 
}