行的相等高度占据屏幕的最大区域

Question

我创建了this结构，其中我在屏幕上有10行。

所有行都有height:10%;

如果你签入chrome，你会发现行的高度不一样，有1px 差。

我需要达到以下输出

1. 等高的所有行。
2. 顶部和底部应该有相同的空间。我可以不给出固定的高度 至ul，因为我想占据屏幕的最大区域。

提前感谢您的帮助！

Answer 1

你可以使用jQuery。

以下是DEMO

的jQuery

var windowHeight = $(window).height();
var contentHeight = windowHeight-(windowHeight%10);
var topSpace = (windowHeight%10)/2;
$('ul').css({
  marginTop: topSpace,
  height: contentHeight
})

Answer 2

您可以尝试设置box-sizing: border-box;并清除边框，如this;

这样可以为行高折扣边框计算。

Answer 3

li {
  padding:12px;
  display:block;
  background: yellow; 
  list-style: none;
  border: 2px solid red;
}

试试这段代码