html div 上下平分,flex实现子元素垂直等分父元素高度 |
您所在的位置:网站首页 › css设置高度为屏幕高度怎么设置 › html div 上下平分,flex实现子元素垂直等分父元素高度 |
今日需要做一个排行榜。由于屏幕高度不确定,且取的数据条数不确定,又不想写JS实现,就用flex布局实现了。在实现的过程中还是遇到了一个坑的。废话不多说,开始撸代码! 假设我们有一个父DIV,div里有3个p标签,我们想均分浏览器窗口的高度。如果对flex布局不清楚的童鞋,请先看这篇文章。flexbox弹性伸缩盒布局教程 * { padding: 0; margin: 0; box-sizing: border-box; } /* 以下代码就起作用了,正常情况下下面代码就能实现均分垂直高度。 */ .test{display: flex; flex-direction: column; background: #bbb; } .test p{width: 100%; border: 1px solid #ccc; flex: 1; } 1 2 3 代码的效果如下: 我们发现,和我们的预期不一样。我们的预期是1,2,3 这3个p标签,均分窗口的高度。 然后我们检查代码,父元素设置 display: flex; 为弹性盒模型, flex-direction: column; 设置元素为垂直显示。没毛病。 子元素设置 flex: auto; 或者 flex: 1。即等于flex-grow: 1; flex-shrink: 1;flex-basis:auto; (flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选) 那问题出在那里呢 经过不断测试发现,是父元素缺少高度的原因。你只需要给父元素一个高度,比如height:500px; 但是我们这个例子中想纯css实现,那怎么办呢,其实很简单,稍微修改下我们的代码就可以了。请看代码 * { padding: 0; margin: 0; box-sizing: border-box; } /* 设置html,body的高度,和父元素的高度即可了 */ html,body{ height: 100%; } .test{ height: calc(100%); display: flex;flex-direction: column; background: #bbb;} .test p{flex: auto; border: 1px solid #ccc; } 1 2 3 总结: 1、如果你无法实现flex均分高度,请检查你的父元素是不是没有高度呢。 2、子元素均分父元素高度即子元素设置样式flex: 1;或者flex: auto; |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |