Question

所以我有一个垂直UL，占据了400px的高度。在我需要动态扩展以填充ul的3个（并且只有3个）中。

这是我开始的小提琴。我知道这些似乎是基本的，但我现在正在消隐。

感谢帮助!!

http://jsfiddle.net/NtVQs/

Answer 1

将33.33%的高度赋予所有li以非常简单的方式解决了这个问题。查看demo

Answer 2

每个li - 元素必须是高度的三分之一，因此它们会完全填充ul - 元素。

一个简单的解决方案是添加

height: 33.3%;

到li - 元素的CSS。您还可以使用绝对已知高度（400px）并将li - 元素的高度设置为此值的三分之一：

height: 133px;

如果你想完全填充ul - 元素的高度，你也可以添加这个CSS：

li:first-child {
  height:134px;
}

由于133 + 133 + 134 = 400.（此加法的学分转到Mr Lister，请参阅此页面上的评论之一）

Answer 3

这不完美，但我这样做了：http://jsfiddle.net/NtVQs/1/

在height: 33%标记中添加LI似乎可以解决问题。

Answer 4

这是jQuery的代码：http://jsfiddle.net/NtVQs/

// get UL height
var ulHeight = $('ul').height();
// set height for the Lis
$('li').height(ulHeight / 3);
$('li').first().height((ulHeight / 3) + ulHeight % 3);

我应该补充一点，这可以避免使用简单的css解决方案时出现的问题

Answer 5

如果你向li元素添加33.3％的高度，你将使用3个相等高度的框填充几乎所有空间。然后，您可以使用伪选择器来定位其中一个列表元素以填充最终的％缺失，使其达到33.4％以覆盖错过的0.1％。这不会使文本垂直居中，但会对父UL的填充进行整理。

这是什么，因为它可以让我们建议另一种解决方案。

Answer 6

http://jsfiddle.net/PHsNU/

使用此功能，您可以缩放到列表中的任意数量的元素。但是，使用javascript不是一个理想的解决方案。

UL中LI的动态高度

6 个答案: