높이 50 % 사파리

Question

에 플렉스 부모의 절반을 작성하지 나는 service-box-one & service-box-two가 필요 service-details 아이가 부모 DIV service-box의 절반 크기와 하단에 위치하는 2있는 세 된 div의 아래 jsfiddle이 학부모 담당자 service-box

이 사파리와 함께, 그러나, IE, 파이어 폭스와 크롬에서 잘 작동 div의 empty-details 및 service-details는 50 % 높이를 상속하지 않습니다 및 부모 DIV service-box 대신 하단의 상단에 앉아있다.

IE, Firefox 및 Chrome에서 jsfiddle을로드하면 어떻게 보이는지 알 수 있습니다.

jsfiddle

.service-3col { 
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    -moz-flex-wrap: wrap; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 

 
.service-3col>li { 
 
    overflow: hidden; 
 
} 
 

 
.service-box { 
 
    width: 33.33333%; 
 
    max-width: 33.33333%; 
 
    -webkit-box-flex: 1 1 33.33333%; 
 
    -moz-box-flex: 1 1 33.33333%; 
 
    -webkit-flex: 1 1 33.33333%; 
 
    -ms-flex: 1 1 33.33333%; 
 
    flex: 1 1 33.33333%; 
 
    padding: 0 10px; 
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.service-box .service-img { 
 
    min-height: 250px; 
 
    position: relative; 
 
    transition: all 0.5s ease-in-out; 
 
    background-image: url('https://wallpaperbrowse.com/media/images/random-pictures-1.jpg'); 
 
} 
 

 
.service-box .service-img { 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
} 
 

 
.service-box .service-img .empty-details { 
 
    height: 50%; 
 
    background: transparent; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.service-box-one .service-img .service-details, 
 
.service-box-two .service-img .service-details { 
 
    height: 50%; 
 
} 
 

 
.service-box .service-img .service-details { 
 
    background: rgba(0, 102, 0, 0.8); 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.service-box .service-img .service-details h1 { 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-family: 'Times New Roman', Arial, Helvetica, sans-serif; 
 
    text-transform: uppercase; 
 
    margin-top: 15px; 
 
    margin-bottom: 0; 
 
    font-size: 1.6em; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    margin: .67em 0; 
 
} 
 

 
.service-box-one .service-img .service-details p, 
 
.service-box-two .service-img .service-details p { 
 
    font-size: 1.2em; 
 
} 
 

 
.service-box .service-img .service-details p, 
 
.service-box .service-img .service-details b { 
 
    text-align: center; 
 
    color: #FFF; 
 
    margin: 0 1em 1em 1em; 
 
} 
 

 
.service-box-three .service-img .service-details { 
 
    height: 100%; 
 
}

<div class="Zebra-section"> 
 
    <div class="container"> 
 
    <ul class="service-3col"> 
 
     <li class="service-box service-box-one"> 
 
     <div class="service-img"> 
 
      <div class="empty-details"> 
 
      </div> 
 
      <div class="service-details"> 
 
      <h1>NO VAT!</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo, odio sit amet interdum porttitor</p> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="service-box service-box-two"> 
 
     <div class="service-img"> 
 
      <div class="empty-details"> 
 
      </div> 
 
      <div class="service-details"> 
 
      <h1>Surveys</h1> 
 
      <p>Buying a house? 
 
       <br> You need a survey. 
 
      </p> 
 
      <a class="Btn Btn--big">READ MORE</a> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="service-box service-box-three"> 
 
     <div class="service-img"> 
 
      <div class="service-details"> 
 
      <h1>Testimonials</h1> 
 
      <div class="testimonial-fade"> 
 
       <div class="testimonial-text"> 
 
       <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo, odio sit amet interdum porttitor, nibh elit tempus mi, ac consequat tortor sem vitae sapien. Mauris tempus leo neque, in sollicitudin lorem venenatis ac. Vestibulum imperdiet mollis dignissim. Suspendisse vitae posuere tellus.</em></p> 
 
       <b>Chris</b> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

당신의 CSS에 코드의 두 줄을 추가합니다 :

.service-box .service-img .empty-details 
{ 
    position:relative;   <-------- this 
    float:left;     <-------- this 
    width:100%; 
    height: 50%; 
    background: transparent; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    flex-direction: column; 
} 

그 두 라인은 각각의 empty-details div 및 service-details div을 강제해야한다는 입장을 relativecontainer div에 둘 다 width:100%입니다. 둘 다 위쪽 너비를 취한 후 맨 아래로 가야한다는 것을 의미하는 전체 너비를 차지해야합니다. 상단 예를 들어 당신은 그것의 parent container 요소부터 position:absolute 및 bottom:0 될하기 위해 service-details div을 설정할 수 있습니다 작동하지 않은 경우

지금 (우리가 위를 CH3OH 새로운 CSS를 떠나) position: relative을 가지고, 예를 들어, 다른 방법이있다. 다음과 같이 이전 문구 (예전 CSS를 지우지 말것) 아래에 .service-details 클래스를 추가하십시오.

.service-box-one .service-img .service-details, .service-box-two .service-img .service-details 
{ 
    height: 50%; 
} 

.service-details 
{ 
    position:absolute; // Container div must have position:relative 
    bottom:0;    // No need to write px in 0px when value is 0 
}