我正在构建一个phonegap应用程序。我有以下内容：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Three <br>a Half</li>
</ul>
如何使<li>元素垂直拉伸并填充页面的整个高度，因为这需要是动态的，以便它适应其他视口。 <li>元素内的文本需要垂直居中并支持多行。
有没有干净的方法呢？
答案 0 :(得分：5)
我建议使用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;
}
答案 1 :(得分：1)
这是一个JavaScript解决方案，它将根据视口height提供height。
ul获取整个视口的高度：
var li = document.getElementsByTagName('li');
function doMath() {
for (i = 0; i < li.length; i++) {
li[i].style.height = window.innerHeight / li.length + 'px';
}
}
doMath();
window.onresize = doMath;ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
background: rosybrown;
}
span {
display: block;
position: relative;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
li:nth-of-type(2n) {
background: plum;
}
body {
margin: 0;
}<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
<li><span>Three<br />a Half</span></li>
<li><span>Four</span></li>
<li><span>Five<br />a Half</span></li>
<li><span>Six</span></li>
</ul>
li s获取整个视口的高度：
var li = document.getElementsByTagName('li');
function doMath() {
for (i = 0; i < li.length; i++) {
li[i].style.height = window.innerHeight + 'px';
}
}
doMath();
window.onresize = doMath;ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
background: rosybrown;
}
span {
display: block;
position: relative;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
li:nth-of-type(2n) {
background: plum;
}
body {
margin: 0;
}<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
<li><span>Three<br />a Half</span></li>
<li><span>Four</span></li>
<li><span>Five<br />a Half</span></li>
<li><span>Six</span></li>
</ul>
答案 2 :(得分：0)
您的问题分为两部分：第一部分是强制<ul>元素拉伸以填充视口，第二部分是垂直和水平居中<li>内容。但是，居中需要修改标记。我们可以使用<li>元素将所有内容包装在<div>中。
对于居中，我们可以使用CSS3 flexbox。 这将是一个无JS的解决方案，虽然它享有较少的跨浏览器支持。对于视口大小，我们可以分别使用vw和vh单位。
ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
li {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
li div {
}
/* For stylistics only */
li:nth-child(odd) {
background-color: #ddd;
}<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/>
<ul>
<li><div>One</div></li>
<li><div>Two</div></li>
<li><div>Three</div></li>
<li><div>Three <br>a Half</div></li>
</ul>
但是，可能会出现使用CSS flexbox和视口单元不理想的情况 - 例如，iOS7有一个记录良好的渲染错误，无法正确计算vh。在这种情况下，我们可能不得不依赖JS。每个<li>的高度简单地除以容器中存在的<li>的数量。
var calcHeight = function() {
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var li = document.querySelectorAll("ul li");
for(var i=0; i<li.length; i++) {
li[i].style.height = (h/li.length)+'px';
}
}
calcHeight();
window.onresize = calcHeight();ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
li {
display: block;
width: 100%;
position: relative;
}
li div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
li:nth-child(odd) {
background-color: #ddd;
}<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/>
<ul>
<li><div>One</div></li>
<li><div>Two</div></li>
<li><div>Three</div></li>
<li><div>Three <br>a Half</div></li>
</ul>
答案 3 :(得分：0)
你需要向body和html添加100％的高度，试试这个
<style>
body, html {
height: 100%;
}
ul {
height: 100%;
display: table;
}
li {
height: 25%;
display: table-row;
}
li div{
height: 25%;
display: table-cell;
vertical-align: middle;
}
</style>
Jsfiddle链接：http://jsfiddle.net/d80xw55e/1/
答案 4 :(得分：0)
由于您允许使用Javscript，这非常简单，我只是无法正确获取项目符号。希望你不会使用它吗？
function liH(){
var lis = document.getElementsByTagName("li");
var spans = document.getElementsByTagName("span");
var liHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) / lis.length;
for(var i = 0; i < lis.length; ++i){
var spanH = spans[i].getBoundingClientRect().height;
lis[i].style.paddingTop = ((liHeight - spanH) / 2) + "px";
lis[i].style.paddingBottom = lis[i].style.paddingTop;
//spans[i].style.top = -(spanH / 4) + "px"
}
}
liH();
window.onresize = liH;li {background:#eee;margin-bottom:5px;}
span {position:relative;}<ul>
<li><span>elem1</span></li>
<li><span>elem2</span></li>
<li><span>elem<br />3</span></li>
</ul>
视图不精确的原因是因为顶部的填充物不会被移除，并且因为我用来区分元素的5px边距。