jsfiddle

Question

我有一个以下3个div的jsfiddle，其中2个service-box-one＆amp; service-box-two孩子service-details的大小必须是父div [{1}}的一半，并且位于父div service-box的底部。

这在IE，Firefox和Chrome中运行良好，但是，通过safari，div service-box和empty-details不会继承50％的高度并且位于父div的顶部service-details而不是底部。

如果您在IE，Firefox和Chrome中加载jsfiddle，您可以看到它应该如何显示。

jsfiddle

＆＃13;

service-box

＆＃13;

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

＆＃13;

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每个人relative的位置container div，因为他们都有width:100%他们都应该占据整个宽度意味着后者必须从顶部开始到底部。

还有其他方法，例如，如果最上面的示例没有用，您可以将service-details div设置为position:absolute和bottom:0，因为其parent container element现在有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
}

高度50％没有填充Safari上Flex父级的一半

jsfiddle

1 个答案: