如何实现两列flex布局div对齐至网站底部并自适应高度

现有代码失效原因 #

你的代码实现不了预期效果，核心是4个问题：

• CSS变量写法错误：定义变量时用了长破折号—，不是CSS变量要求的双连字符--，导致所有var()引用的规则全部失效，包括flex:1的配置根本没生效。
• 卡片元素内联写了height: fit-content，直接覆盖了flex子项默认的拉伸对齐逻辑，两个卡片没法自动撑满到相同高度。
• .my-card写死了width: 100%，大屏下flex横向排列时，两个卡片各占满整行宽度自然会换行，没法并排显示。
• 父容器没有配置高度规则，没法自动延伸到页面底部。

修正代码 #

CSS部分 #

:root {
    /* 修正所有CSS变量的前缀为标准双连字符-- */
    --tds-size--3x: 24px;
    --tds-gutter--negative: calc(24px * -1);
    --tds-size--2x: 16px;
    --tds-card--border-radius: 8px;
    --tds-flex-nm: 1;
}
.tds-flex-gutters {
    margin-block-start: var(--tds-gutter--negative);
    margin-block-end: var(--tds-size--3x);
    margin-inline-start: var(--tds-gutter--negative);
    margin-top: 15px;
    /* 配置最小高度撑满视口，减去页面头部、导航等固定模块的高度即可实现延伸到页面底部效果，不需要固定高度就删掉这行 */
    min-height: calc(100vh - 120px);
}
@media (min-width: 600px) {
    .tds-flex {
        flex-flow: row nowrap;
        /* 用gap控制两个卡片的间距，代替单独写margin导致的宽度溢出问题 */
        gap: 35px;
        align-items: stretch;
        padding: 25px var(--tds-size--2x) 0;
    }
}
.tds-flex {
    display: flex;
    /* 小屏默认纵向堆叠 */
    flex-flow: column wrap;
    list-style: none;
    margin: 0;
    padding: 25px var(--tds-size--2x) 0;
    width: 100%;
}

.my-card {
    /* 删掉写死的width: 100%，由flex自动分配宽度 */
    background-color: #fff;
    box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
    flex: var(--tds-flex-nm);
    margin: 0;
}
.tds-card {
    padding: var(--tds-size--2x);
    border-radius: var(--tds-card--border-radius);
    /* 卡片撑满父级高度实现等高 */
    height: 100%;
}

HTML修改点 #

• 删掉两个.my-card标签上内联的style="height: fit-content;"，否则拉伸规则会被覆盖
• 删掉卡片上原有的margin-left: 35px、margin-top:25px，间距已经由父容器的gap和padding统一控制，避免宽度计算错误

效果说明 #

• 屏幕宽度小于600px时，两个卡片保持纵向堆叠，和你现有小屏显示效果一致
• 屏幕宽度大于等于600px时，两个卡片自动等宽并排，高度自动对齐：如果配置了min-height，卡片会一直延伸到页面底部；如果删掉min-height配置，两个卡片会自动和内容更高的那个卡片保持等高
• 不需要额外写JS监听高度，纯CSS实现，兼容所有现代浏览器

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