设定百分比时Div的高度变为0

Question

我有li's与flexlayout 。 每栏中有3 li's 。 （ flex-basis设置为第三个。）在li我有一个div用于背景图像，另一个div用于显示文本。 我希望文字在图片下方。 图像应占据整个房间的大部分。

由于某种原因， image不存在。 我将image高度设置为80% ，但是当我运行它并转到“检查元素”（在chrome中）时， div's高度为0。当我将其设置为带有像素的数量（而不是百分比）时，它就可以工作。

我的问题是，如何将div设置为百分比并仍然显示呢？

的jsfiddle

 html, body { margin: 0; height: 100%; } div { align-items: center; justify-content: center; height: 100%; display: flex; overflow: auto; background-color:aqua; } ul { margin-top: auto; margin-bottom: auto; height: calc(70% + 0px); padding: 0; display: inline-flex; flex-wrap: wrap; flex-direction: column; width: 100%; align-content: flex-start; } li { flex-basis: calc(100% / 3 - 2px); /* Subtract the border */ color: firebrick; border: 1px solid firebrick; background-color: greenYellow; margin: 0px; list-style-type: none; box-sizing: border-box; background-size: contain; width: 200px; } .image { background-image: url("http://i.imgur.com/nswXRR4.jpg"); background-size: contain; background-position: 50%, 50%; background-repeat: no-repeat; margin: 5px; height: 90%; } 

 <div> <ul> <li> <div class="image"></div> <div class="num">1</div> </li> <li> <div class="image"></div> <div class="num">2</div> </li> <li> <div class="image"></div> <div class="num">3</div> </li> <li> <div class="image"></div> <div class="num">4</div> </li> </ul> </div> 

Answer 1

您的li没有定义的height属性。 然后，您的.image div试图变为未定义的90% 。 您可以猜测是什么：0。

根据您的需要，可以将li设置为display:flex ，然后使.image div的增长大于.num div的增长，如下所示。

还有更多修改flex: 10 1 0或flex: 1 0 0属性，以获取所需的确切信息，但以下代码为示例：

 html, body { margin: 0; height: 100%; } div { align-items: center; justify-content: center; height: 100%; display: flex; overflow: auto; background-color:aqua; } ul { margin-top: auto; margin-bottom: auto; height: calc(70% + 0px); padding: 0; display: inline-flex; flex-wrap: wrap; flex-direction: column; width: 100%; align-content: flex-start; } li { flex-basis: calc(100% / 3 - 2px); /* Subtract the border */ color: firebrick; border: 1px solid firebrick; background-color: greenYellow; margin: 0px; list-style-type: none; box-sizing: border-box; background-size: contain; width: 200px; display:flex; flex-direction:column; } .image { flex: 10 1 0; } .num { flex: 1 0 0; } .image { background-image: url("http://i.imgur.com/nswXRR4.jpg"); background-size: contain; background-position: 50%, 50%; background-repeat: no-repeat; margin: 5px; height: 90%; } 

 <div> <ul> <li> <div class="image"></div> <div class="num">1</div> </li> <li> <div class="image"></div> <div class="num">2</div> </li> <li> <div class="image"></div> <div class="num">3</div> </li> <li> <div class="image"></div> <div class="num">4</div> </li> </ul> </div> 

Answer 2

尽管li的高度由flex-basis: calc(100% / 3 - 2px);定义flex-basis: calc(100% / 3 - 2px); ，当处理百分比时，浏览器通常会将规范解释为由height属性定义的平均高度。

以我的经验，当处理百分比高度时， min-height ， max-height和flex-basis从未用作父元素的高度 。 即使没有明确指出这必须是规范中的方式，但只有height有效。 （更新： Firefox可能会扩展其解释。 ）

您可以进行以下调整：

代替： flex-basis: calc(100% / 3 - 2px);

使用： height: calc(100%/3 - 2px);

然而...

根据您写的内容：

在li我有一个div用于背景图像，另一个div用于显示文本。 我希望文字在图片下方。 图像应占据整个房间的大部分。

...不一定是关于百分比高度的问题。 您可以在li上保留flex-basis ，将li为flex容器，然后将flex属性应用于图像和文本。

对li此调整：

li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;

    display: flex; /* new */
    flex-direction: column; /* new */
}

然后调整图像和文本：

.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    /* height: 90%; remove */
    flex: 10 1 auto; /* new */
}

.num {
    flex: 1 1 auto;
}

DEMO

注意： flex: 10 1 auto; 表示flex-grow: 10 ， flex-shrink: 1 ， flex-basis: auto 。 换句话说，与具有flex-grow: 1同级项相比，flex项所消耗的可用空间最多多10倍，与具有flex-shrink: 1同级项成比例地均匀flex-shrink: 1 ，并且其初始主要大小基于内容大小。