Question

我正在一个网站上工作，其中一个部分的结构是这样的：

<div class="col-md-6">
    <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image')['url']; ?>);">
    </section>
</div>

在这种情况下，父div（在safari中）的高度为2976px。但是，即使我已将height属性应用于它，孩子也不会将自己调整到相同的高度。

我在Chrome＆amp; Safari，都在macOS上：Chrome工作，Safari没有。

有没有让这个工作，最好没有任何JS？谢谢:)）

- 编辑

我正在使用Bootstrap4，但right类仅包含用于设置div样式的属性。

下面的内容

  .right {
    max-width: 50vw;
    height: 100%;
    background-size: 60vh !important;
    background-repeat: no-repeat;
  }

- 编辑＃2。

这是一个演示问题的片段：

.left {
  padding: 0;
  background: #000; /*debugging*/
  height: 200px; /*debugging*/
}

.right {
  height: 100%;
  background-size: 60vh !important;
  background-repeat: no-repeat;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-6 left">
    </div>
    <div class="col-6">
      <section class="right" data-type="background" data-speed="30" style="background: red;"></section>
    </div>
  </div>
</div>

（或在JSFiddle中：Click me

Answer 1

问题是您的父div没有高度属性。即使Chrome能够解析容器高度，Safari（以及其他一些浏览器）也不行。要解决此问题，您还需要为div（.row的父级）中的第二个.right指定一个高度。

定型

.right-parent {
  height: 200px;
}

标记

<div class="col-6 right-parent">
  <section class="right" data-type="background" data-speed="30" style="background: red;"></section>
</div>

Demo

Answer 2

作为建议，您可以使用网页CANIUSE ，您可以查看浏览器支持的css属性。在我的观点中，最好的解决方案是使用 jquery 或 javascript 来设置div的高度，当页面调整大小或将加载时。 您无法找到解决跨浏览器支持的绝对完美解决方案。如果您需要jquery的帮助，请在需要时随时询问。

Safari不会将div的100％作为父级的高度

2 个答案: