列表高度 100% 在 Safari 中不起作用 [重复]答案

【问题标题】：List height 100% doesn't work in Safari [duplicate]列表高度 100% 在 Safari 中不起作用 [重复]
【发布时间】：2016-09-20 05:20:47
【问题描述】：

我遇到了一个问题，即 ul 元素在 safari 中未显示在其父元素的 100% 高度。我知道这不是一个新问题，之前可能已经在这里回答过，但我找不到与我的具体问题相近的答案，其中大多数是关于 div 不是整个页面的 100% 等。

这是它在 Chrome 中的外观（这是我想要的结果）：

这是它在 Safari 中的外观：

这是css：

.container {
  display: flex;
  flex-flow: row wrap;
}

.header {
    min-height: 60px;
  border: 1px solid #000;
}

.list {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
  padding: 10px;
  background-color: #cecece;
}

请注意，我的应用程序需要 .list 类中的其余 css。

请查看Jsfiddle

干杯！

【问题讨论】：

标签： css safari height html-lists flexbox

【解决方案1】：

.container {
  display: flex;
  flex-flow: row wrap;
}

.header {
	min-height: 60px;
  border: 1px solid #000;
}

.list {
	height: 100%;
	display: flex;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
  background-color: #cecece;
}

li {
  padding: 10px;
  background-color: #cecece;
}

<div class="container">
  <div class="header">
    <ul class="list">
      <li>
        Donald
      </li>
      <li>
        Hillary
      </li>
      <li>
        Gary
      </li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试将 normalize.css 添加到您的代码中（在 jsfiddle 中，您可以仅通过 css 选项执行此操作）然后尝试 safari，它应该可以工作。

【讨论】：