Mobile Safari 和 Bootstrap 4 列内容高度 100% 未兑现

Question

我在我的网页上使用 Bootstrap 4，它在 flex 模式下使用 bootstrap 网格布局。

在其中一列中，我有一个要填充该列的按钮。这是通过使用 CSS 将按钮设置为 100% 高度来完成的。

这在所有浏览器中都没有任何问题，除了 Safari，它似乎被忽略了。

我正在使用的 html 看起来像这样：

<div class="container">
    <div class="row">
        <div class="col-10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius.
        </div>
        <div class="col-1">
            <button class="btn btn-primary" type="button">Lorem ipsum</button>
        </div>
    </div>
</div>

除了常规 bootstrap 代码外，我还添加了以下 css:

button { height: 100%; }

这是一个显示问题的代码笔示例 http://codepen.io/anon/pen/BppMvw

有人对如何解决这个问题有什么建议吗？由于该行中的其他列可能具有可变高度，因此我无法设置固定高度。 Javascript 也不是一个选项。

Answer 1

一个解决方案可能是在按钮上设置 flex:1 并使其父级成为弹性容器。 See here.

Mobile Safari 和 Bootstrap 4 列内容高度 100% 未兑现

Mobile Safari and Bootstrap 4 column content height 100% not honored

css

safari

mobile-safari

bootstrap-4