javascript - 垂直拉伸(stretch)列表项

Question

我正在构建一个 phonegap 应用程序。我有以下内容:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three <br>a Half</li>
</ul>

如何制作 <li>元素垂直拉伸(stretch)并填充页面的整个高度，因为这需要是动态的，以便它适应其他视口(viewport)。 <li>里面的文字元素需要垂直居中，支持多行。

有什么干净的方法可以做到这一点吗？

Answer 1

我建议使用 display: table CSS3 规则系列。如果操作正确，它们将是动态的并保持完整的高度间距:

body, html {
    height: 100%;
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}

ul li {
    display: table-row;
}

ul li a { /* assuming an anchor child.  Can be anything */
    display: table-cell;
    vertical-align: middle;
    padding: 1em 3em;
}

演示:http://jsfiddle.net/6z3q35x0/1/