html – d性列中的等高高度d性项目

概述我试图让它成为列中的列表项在列表中具有相同的高度. 这是我有的： <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 我试图让它成为列中的列表项在列表中具有相同的高度.

这是我有的：

<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而不是列表来完成这个.不过,没有运气.

有线索吗？

解决方法 因为你在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/

I think the trouble has to do with having to set height: 100% to every
single parent element all the way to HTML. Can that be right?

对,那是正确的.如果使用百分比高度,则需要为每个父级指定高度,直到根元素(HTML).我在这里解释了这个原因：

> Working with the CSS height property and percentage values

My List is deeply nested and setting all those heights breaks the
layout. I would prefer to work only with fluID heights.

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

总结

以上是内存溢出为你收集整理的html – d性列中的等高高度d性项目全部内容，希望文章能够帮你解决html – d性列中的等高高度d性项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。