동일한 높이의 열은 Chrome에서만 작동합니다.

Question

동일한 높이로 확장되는 3 개의 열이 있습니다. 문제는 Chrome에서만 작동하는 것으로 보이며 적어도 Safari 나 FF에서는 작동하지 않는다는 것입니다. 또한 iPad 용 Chrome 또는 Safari에서도 작동하지 않습니다.

그들이 모든 브라우저에서 작동하는 것 (단지 더 나은 시각화를 위해 국경을 변경) here

재미있는 것은이 Fiddle example에 나는 정확히 같은 코드로 준비했습니다 것입니다 행동을 참조하십시오 .

해결 방법이 있습니까? 많은 감사합니다!

HTML

<div id="wrapper"> 
      <div class="col"> 
      <div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg"> 
       <h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3> 
       <!-- CUSTOM LIST --> 
       <div class="custom-list info-box-inner-list"> 
       <ul> 
        <li>Tuesday 31st December 2013</li> 
        <li>The 4* Holiday Inn Hotel</li> 
        <li>London WC1N 1HT,</li> 
        <li>pop, dance, disco, electronic</li> 
       </ul> 
       </div> 
       <!-- END CUSTOM LIST --> 
       <p>Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.LAST WORD</p> 
       <div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div> 
      </div> 
      </div> 
      <div class="col"> 
      <div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg"> 
       <h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3> 
       <!-- CUSTOM LIST --> 
       <div class="custom-list info-box-inner-list"> 
       <ul> 
        <li>Tuesday 31st December 2013</li> 
        <li>The 4* Holiday Inn Hotel</li> 
        <li>London WC1N 1HT,</li> 
        <li>pop, dance, disco, electronic</li> 
       </ul> 
       </div> 
       <!-- END CUSTOM LIST --> 
       <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..</p> 
       <div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div> 
      </div> 
      </div> 
      <div class="col"> 
      <div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg"> 
       <h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3> 
       <!-- CUSTOM LIST --> 
       <div class="custom-list info-box-inner-list"> 
       <ul> 
        <li>Tuesday 31st December 2013</li> 
        <li>The 4* Holiday Inn Hotel</li> 
        <li>London WC1N 1HT,</li> 
        <li>pop, dance, disco, electronic</li> 
       </ul> 
       </div> 
       <!-- END CUSTOM LIST --> 
       <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.</p> 
       <div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div> 
      </div> 
      </div> 
     </div> 

CSS

.content > img { 
    vertical-align:top; 
} 
#wrapper { 
    height: 100%; 
    width: 100%; 
    margin: 20px auto; 
    display:table; 
    overflow: hidden; 
} 
#wrapper > .col { 
    display: table-cell; 
    width: 30.3%; 
    margin: 0 15px 3px; 
    background-color: #fff; 
    text-align: center; 
    position: relative; 
    height: 100%; 
    padding-bottom: 2px; 
    border:1px solid #000; 
} 
#wrapper > .col > .content { 
    padding:0 0 35px; 
    height:100%; 
} 
.content { 
    margin-bottom:30px; 
    position: relative; 
} 
.content > p { 
    vertical-align:top; 
} 
.content h3 { 
    font-size:1.375rem; 
    font-weight:400; 
    text-align:center; 
    margin-bottom: 20px; 
    padding: 25px 27px 0; 
} 
.content p { 
    text-align:left; 
    padding: 0 27px 30px; 
} 
.button.moreinfo { 
    margin-top: 5px; 
    margin-bottom: 0; 
    padding-top: 0.5rem; 
    padding-right: 0.3rem; 
    padding-bottom: 0.5rem; 
    padding-left: 0.3rem; 
    background-color: #2a2a2a; 
    font-size: 0.9rem; 
    color: #f39c12; 
    font-weight: 400 !important; 
} 
div.btn-align-bottom { 
    position:absolute; 
    bottom:50px; 
    left:0; 
    right:0; 
} 
.info-box { 
    margin-bottom:0; 
    margin-top: 15px; 
} 
.info-box img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 
.info-box-inner { 
    background: #FFF; 
    padding:25px 27px 35px; 
    display:inline-block; 
    overflow:hidden; 
    float:none; 
    min-height:270px; 
    text-align:center; 
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    z-index:1; 
} 
.info-box-inner p { 
    text-align:left; 
} 
.info-box-inner h3 { 
    font-size:1.375rem; 
    font-weight:400; 
    text-align:center; 
} 

Answer 1

당신은 부모가 더 relative 위치이없는 것으로 보이기 때문에, bottom:0;가 html 또는 가장 가까운의 bottom 것으로 판명 할 수 absoluteposition 및 사용하기 때문에 상위 : position : relative, absolute or fixed.

옆에 Firefox는 tabledisplay과 position : relative;을 함께 처리하지 않습니다.

그래서, 랩퍼 (테이블로 표시됨)를 수신 할 수있는 래퍼에 래퍼를 래핑하는 것이 좋습니다. position:relative; .wrapper로 확장하고 coordonates가 도달 할 수있는 하단 영역을 제공합니다. 업데이트

귀하의 바이올린 : http://jsfiddle.net/AU5G3/1/

사항은 왼쪽 삭제하고 CSS 느릅 나무에서 바로 coordonates 메인 래퍼가 아닌 COL 영역에서 계산됩니다.