Safari 不会将 div 设为其父级高度的 100%

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 中）的高度为 2976 像素。但是，即使我已将 height 属性应用于它，孩子也不会将自己调整到相同的高度。

我在 macOS 上的 Chrome 和 Safari 中都试过这个：Chrome 工作，Safari 没有。

有没有办法让它工作，最好没有任何 JS？谢谢:)

-- 编辑

我使用的是 Bootstrap4，但是，right 类只包含设置 div 样式的属性。以下内容

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

-- 编辑#2。

这是一个演示问题的 sn-p：

.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

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

Answer 2

问题是您的父母div 没有高度属性。即使 Chrome 能够解析容器高度，Safari（可能还有其他一些浏览器）却不能。为了解决这个问题，您还必须在 .row（.right 的父级）中指定第二个 div 的高度。

造型

.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