height：在Safari中断开的语义UI列中的内部div上的100％

Question

我正在尝试使用语义UI来创建由排水沟分隔的一排相等高度的列。我的解决方案适用于Chrome和Firefox但不适用于Safari（我还没有测试过IE）。 Safari开发工具显示每列的高度与预期相同，但创建.inner div并将高度设置为100％对.inner的高度没有影响。

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

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>

Answer 2

这确实是Safari中的一个已知问题。解决方法是在 .ui.grid .column 上定义height属性，并将 div.inner 高度设置为＆＃39; inherit＆＃39;。下面是一个在Safari浏览器中运行的css代码：

div.inner{
    height:inherit;
    background-color:gold;
}

.ui.grid .column{
    height:25vh;
}

屏幕截图：