Question

我将我的演示页面划分为10个列表项，每个列表项使用10％宽度和400px高度。但是我希望每个列表项都以100％的高度显示，覆盖整个屏幕。我正在尝试设置列表项的高度，但是当我使用'height：100％'时，列表项目会继续消失。我该如何管理？

HTML

<div class="container">
            <ul class="cbp-rfgrid">
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
                <li><a href="#"><div><h3>Felis catus</h3></div></a></li>
            </ul>
        </div>

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    background-color:#03F;
}

.container {
    height: 100%;
}

.cbp-rfgrid {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

.cbp-rfgrid li {
    position: relative;
    float: left;
    overflow: hidden;
    width: 10%; /* Fallback */
    width: -webkit-calc(100% / 10);
    width: calc(100% / 10);
    height:400px; /* CURRENT HEIGHT, SHOULD BE 100% BROWSER HEIGHT  */
}

.cbp-rfgrid li a {
    display: block;
    width: 100%;
    cursor: pointer;
}

.cbp-rfgrid li a div {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(71,163,218,0.5);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}

.cbp-rfgrid li a:hover div {
    opacity: 1;
}

.cbp-rfgrid li a div h3 {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4em;
    letter-spacing: 2px;
    padding: 0 10px;
}

Answer 1

班级cbp-rfgrid添加height:100%;并将height:400px;更改为height:100%;

.cbp-rfgrid {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.cbp-rfgrid li {
    position: relative;
    float: left;
    overflow: hidden;
    width: 10%; /* Fallback */
    width: -webkit-calc(100% / 10);
    width: calc(100% / 10);
    height:100%; /* CURRENT HEIGHT, SHOULD BE 100% BROWSER HEIGHT  */
}

直播示例： http://jsfiddle.net/g9nDQ/1/

Answer 2

该问题仅仅是因为包含ul的{{1}}没有设置高度。因此li占据li的100％，这取决于他的内容。

将ul设置为ul，height的高度为li ul。

但是，如果您有多个height based on the li，则height:100%标记将在第一个ul之后，ul原因文本上会显示一个滚动条}和第二个li（就像那样：http://jsfiddle.net/D5EHN/）。一个很好的方法来解决这个问题（在li而不是body上设置滚动条）是计算ul的数量并使li * 100％的简单计算然后设置li高度为100％/ li的数量。因此，如果您有4个li，则li高度将为400％，而li高度将为25％（例如：http://jsfiddle.net/D5EHN/2/）。

希望有所帮助

Answer 3

100％的高度恰好等于height：auto，它只按内容扩展高度。尝试将高度设置为min-height：400px之类的东西。

在响应式框架中将LI设置为100％高度

3 个答案: