作者:手机用户2502940425 | 来源:互联网 | 2023-05-28 20:43
我正在构建一个phonegap应用程序.我有以下内容:
- One
- Two
- Three
- Three
a Half
我如何使
元素垂直拉伸并填充页面的整个高度,因为这需要是动态的,以便它适应其他视口.
元素内的文本需要垂直居中并支持多行.
这样做有什么干净的方法吗?
1> Joseph Marik..:
我建议使用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/