高度50％没有填充Safari jsfiddle的flex父级的一半

Posted 2021-05-02

我有一个jsfiddle下面的3个div，其中2个service-box-one和service-box-two孩子service-details需要是父div service-box的一半，位于父div service-box的底部。

这在IE，Firefox和Chrome中运行良好，然而，使用safari，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>

答案

将这两行代码添加到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各自采取relative到他们的container div的位置，因为他们都有width:100%他们应该占据整个宽度意味着后者必须从顶部采取到底部。

还有其他方法，例如，如果顶部示例不起作用，您可以将service-details div设置为position:absolute和bottom:0，因为它的parent container元素现在有position: relative（留下我们刚刚添加的新CSS）。并在旧语句下添加类.service-details（不要删除旧的CSS），如下所示：

.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
}