Div设置百分比后高度变为0

Question

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

由于某种原因 image 不存在。我将 image 高度设置为 80%，但是当我运行它并转到 "inspect element"（在 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); 定义，但在处理百分比时，浏览器通常将 spec 解释为 height 定义的高度属性.

根据我的经验，当 . Only height works, even though it doesn't explicitly say this must be the way in the spec. (Update: )

时，min-height、max-height 和 flex-basis 从未用作父元素的高度

您可以进行此调整：

而不是：flex-basis: calc(100% / 3 - 2px);

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

然而...

根据你写的：

In the li I have a div for a background image, and another div to display text. I want the text to be below the image. The image should take up a majority of the room.

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

对 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 的兄弟姐妹多消耗 10 倍的可用 space，与 flex-shrink: 1 的兄弟姐妹按比例均匀收缩，并且其初始主要大小基于内容尺寸。

Div设置百分比后高度变为0

Div's height becomes 0 when I set a percentage

html

css

flexbox

JSFiddle