Question

我正在尝试制作它，因此列中的列表项在其列表中具有相同的高度。

这就是我所拥有的：

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

我试过：我试图按照本教程：https://css-tricks.com/boxes-fill-height-dont-squish/无济于事。我认为问题与必须设置高度：100％到每个单个父元素一直到html 。这可能是对的吗？

我的列表是深层嵌套的，并设置所有这些高度打破了布局。我宁愿只使用流体高度。

我也试过：用div而不是列表来完成这个。但是，没有运气。

任何线索？

Answer 1

因为你在flex容器上使用了一个百分比高度......

ol { min-height: 100%; }

...您还需要define a height for the parent and root elements。

HTML （无更改）

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

<强> CSS

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
                              set at 90% just for demo purposes */
ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

DEMO：http://jsfiddle.net/kzL4305k/1/

我认为麻烦必须要做到，必须将height: 100%设置为每个单个父元素一直到html 。那可能是对的吗？

是的，这是正确的。如果使用百分比高度，则需要为每个父级指定高度，直到根元素（html）。我在这里解释了原因：

Working with the CSS height property and percentage values

我的列表已深深嵌套，并设置所有这些高度打破了布局。我宁愿只使用流体高度。

如果不使用百分比，则无需为父元素设置高度。尝试在弹性容器上使用min-height像素，然后让flex-grow: 1处理弹性项目的高度问题。

Answer 2

只需添加以下css

即可

ol {  
     display: -webkit-box; 
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: stretch;
     -webkit-align-items: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
ol li {
     background: gold;
     padding: 5px 5px;
     margin: 5px 5px;
     width: 25% 
}

柔性柱中的等高柔性项目

2 个答案: