html - 100% 高不使用位置的元素：绝对技巧？

Question

我想要一个简单的 HTML 布局，其中包含多个<li>内联元素，每个元素都有一个height:100%

我使用了以下 CSS 技巧来完成此操作：

position:absolute;
top:0;
bottom:0;

有关示例，请参见我的 JSFiddle。

由于此问题范围之外的原因，我不希望我的<li>元素绝对定位。有人可以谈谈如何使用position:relative;或position:static; <li>元素实现相同的布局吗？

Answer 1

试试这个jsFiddle 示例。

<li>元素向左浮动并使用display:inline-block规则来获得正确的高度和宽度。浮动也消除了对规则的需求；li.one { left:0; } li.two { left:33%; } li.three { left:66%; }

html, body {
    height:100%;
    margin:0;
    padding:0;
}
ul {
    /* width:100%; */
    /* height:500px; */
    margin:0;
    padding:0;
    list-style:none;
    height:100%;
}
li {
    display:inline-block;
    height:100%;
    background:#333;
    color:white;
    width:33%;
    float:left;
}
li:nth-child(even) {
    background:#666;
}