css - 高度 : 100% on inner div in semantic UI column broken in Safari

Question

我正在尝试使用语义 UI 创建一行由装订线分隔的等高列。我的解决方案适用于 Chrome 和 Firefox，但不适用于 Safari(我尚未测试 IE)。 Safari 开发工具显示每列的高度与预期的一样，但是创建 .inner div 并将高度设置为 100% 对 .inner 的高度没有影响。

我相信我需要 .inner div 以便每个 block 都有一个由装订线分隔的背景颜色。

Here's一个 JSFiddle 来说明问题。对我来说，它在 Chrome 中呈现如下:

在 Safari 中像这样:

我不确定这是否是 WebKit 中的错误(或者甚至是 blink/gecko!)，我发现了一个 similar bug in webkit但它被标记为已修复/已解决。

如果我的方法没有问题，有人可以建议解决方法吗？最好不要用 JavaScript 打补丁。

Answer 1

你能不能使用 display:table; 它会起作用。

.inner {
  height:  100%
}
body {
  font-family: "helvetica";
  background: white;
}
#column-1 {
  background: #e3e0cf;
}
#column-2 {
  background: #9fa8a3;
}
.equal { display:table; }
.column { display:table-cell; }

<div class="ui stackable equal height grid">
  <div class="six wide column" id="column-1">

    <h1>Column 1</h1>

  </div>
  <div class="six wide column" id="column-2">

    <h1>Column 2</h1>
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>

  </div>
</div>