html - 将每个列表项设置为容器高度 (CSS) 的 50% 不起作用

Question

尝试将列表项高度设置为 50%，但似乎没有任何作用。

JSFiddle

HTML

<div class="list-container">

  <ul>
    <li id="item1">hello</li>
    <li id="item2">world</li>
  </ul>

</div>

CSS

ul {
  list-style-type: none;
  height: 100%;
  padding: none;
}

.list-container {
  height: 100%;
}

#item1 {
  height: 50%;
}

#item2 {
  height: 50%;
}

Answer 1

需要先设置html和body高度

html, body {
  height: 100%;
}
ul {
  list-style-type: none;
  height: 100%;
  padding: none;
}
.list-container {
  height: 100%;
  background: red;
}
#item1 {
  height: 50%;
}
#item2 {
  height: 50%;
}

<div class="list-container">
  <ul>
    <li id="item1">hello</li>
    <li id="item2">world</li>
  </ul>
</div>