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

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
})