css布局问题，着急

问题描述

问 题

<ul class="flex">

<li>a</li>
<li>b</li>
<li>c</li>

</ul>

针对高度：
1.ul高度固定
2.a的li高度固定
3.b的li高度会变化（a+b的高度不会超过ul）

要求： c占满剩余的高度，不用js可以写出来吗

解决方案

ul {
    display: flex;
    height: 300px;
    width: 100px;
    flex-direction: column;
}
ul > li {
    flex-grow: 0;
}
li:nth-child(1) {
    height: 100px;
}
li:nth-child(2) {
    word-wrap: break-word;
}
li:nth-child(3) {
    flex-grow: 1;
}

你可以测试一下，应该有更好的方法。

而且这样子的兼容性应该很差。

这篇关于css布局问题，着急的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！