如何用CSS类将动态生成的多个Div固定在页面底部且置于内容下方

要实现将动态生成的.myCssClass div移至指定内容下方并固定在页面底部，可通过Flex布局结合order属性和margin-top: auto实现，无需修改HTML结构，代码如下：

<html>
<head>
    <style>
        /* 重置body默认边距，设置为垂直方向的flex容器，占满视口高度 */
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 调整指定内容的顺序，让它排在所有div前面 */
        p {
            order: -1;
            margin: 1rem; /* 可选，添加边距优化视觉效果 */
        }

        /* 统一设置动态div的样式，通过margin-top:auto推至页面底部 */
        .myCssClass {
            margin-top: auto;
            padding: 0.5rem;
            background-color: #f5f5f5;
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class='myCssClass'>我的div 1当前在下方内容之上，希望移至其下方。</div>
    <div class='myCssClass'>我的div 2当前在下方内容之上，希望移至其下方。</div>
    <div class='myCssClass'>我的div 3当前在下方内容之上，希望移至其下方。</div>
    <div class='myCssClass'>我的div 4当前在下方内容之上，希望移至其下方。</div>

    <p>我的内容当前在上述div标签下方，但我希望将所有div按顺序移至这段内容下方。但由于div是动态生成的，我无法预先知道数量</p>
</body>
</html>

原理说明 #

• body设置为flex容器并指定flex-direction: column，让子元素垂直排列，min-height: 100vh确保容器占满整个视口高度。
• p的order: -1使其优先级高于默认order: 0的div，从而排在页面上方。
• .myCssClass的margin-top: auto会自动填充该元素上方的剩余空间，将所有div推至页面底部，同时保持它们在HTML中的原有顺序。

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