如何让多个div无需硬编码尺寸即可占满父容器全部空间？

要让子元素自动占满父容器高度且适配数量变化，用Tailwind的Flexbox布局就能搞定，纯CSS实现，完全不用JS。

核心改动点： #

• 父容器添加 flex flex-col 类，让子元素垂直排列并自动分配剩余空间
• 子元素去掉固定高度的 h-1/5，换成 flex-1，每个子元素会自动平分父容器的可用高度

修改后的完整代码： #

<div class="mx-auto w-[80%] md:w-full h-72 sm:h-64 md:h-96 flex flex-col">
    <div style="background-image: url('/images/camp1.png')"
         class="w-full flex-1 bg-right bg-no-repeat bg-cover">
        sadhsahd
    </div>
    <div style="background-image: url('/images/camp2.png')"
         class="w-full flex-1 bg-center bg-no-repeat bg-cover">
        sadhsahd
    </div>
    <div style="background-image: url('/images/camp3.png')"
         class="w-full flex-1 flex relative bg-center bg-no-repeat bg-cover">
        safas
    </div>
    <div style="background-image: url('/images/camp4.png')"
         class="w-full flex-1 bg-center bg-no-repeat bg-cover">
        sadhsahd
    </div>
    <div style="background-image: url('/images/camp5.png')" 
       class="w-full flex-1 bg-left bg-no-repeat bg-cover">
        sadhsahd
    </div>
</div>

额外优化说明： #

• 把原来的 background-size: 100% 换成Tailwind的 bg-cover，能让背景图片按比例填充容器，避免拉伸变形；如果需要完整显示图片，可改用 bg-contain
• 要是子元素内容过多溢出，可给子元素加 overflow-auto 显示滚动条，或者 overflow-hidden 隐藏超出部分
• 不管子元素是4个、6个还是其他数量，都会自动平分父容器高度，完全占满空间

内容的提问来源于stack exchange，提问作者Franciszek O