垂直拉伸列表项目

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

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

我怎样才能使<li>元素垂直拉伸并填充页面的整个高度，因为这需要是动态的，以便适应其他视口。里面的文字<li>元素需要垂直居中并支持多行。

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

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

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

Demo: http://jsfiddle.net/6z3q35x0/1/ http://jsfiddle.net/6z3q35x0/1/