如何将<li>元素扩展到<ul>容器的整个宽度，同时还控制高度？

Question

我在SO和其他网站上看到的大多数解决方案都要求将显示屏设为一个表格：

ul {
  overflow: auto;
  padding: 0px;
  width: 100%;
  display: table;
  table-layout: fixed;
}
ul li {
  display: table-row;
}

但是，当我尝试在<ul>容器上设置最大高度时，height会被忽略。如何让<li>元素延伸<ul>的全长，同时还可以在<ul>上设置高度？

Answer 1

Flexbox可以做到这一点:(如果我理解你的目标）。

* {
  margin: 0;
}

ul {
  height: 150px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

ul li {
  background-color: plum;
  border-bottom: 1px solid red;
  width: 100%;
  flex: 1;
  text-decoration: none;
  list-style: none;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Answer 2

你试过了吗？

nav {
  background-color:blue;
}

ul {
  height:50em;   //change to whatever
  margin:0;
  padding:0;
}

ul li {
  background-color:green;
  width:100%;
  height:33.333333%;  // divide by total li's, in this case, i have 3 li's
  text-decoration:none;
  list-style:none;
}

https://jsfiddle.net/8s2o7ra0/3/