/* 重置基础边距，撑满视口 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* 
   ★★★ 关键修复：让 <form> 占满高度，并变成弹性列 ★★★ 
   如果不想改 form，可以把这一条删掉，只保留下面的 .page-wrapper 也行。
*/
form {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* 使用 dvh 更精准（动态视口高度） */
    margin: 0;
}

/* 包裹整个页面的容器：占满高度，弹性列排列 */
.page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* 继承 form 的高度 */
}

/* 
   ★★★ 核心大招：让页脚自己把自己“推”到底部 ★★★ 
   只要内容区没占满，margin-top: auto 就会把页脚挤到最底下
*/
footer {
    margin-top: auto; /* 这是关键！比 flex:1 更不容易失效 */
    /* 额外优化：防止页脚被内容覆盖，加一点顶部间距 */
    padding-top: 20px;
    /* 你可以保留之前 footer 的背景色和边框 */
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* 内容区域：不再需要 flex:1，正常显示即可 */
.content-area {
    /* 你原本的内容样式，可以去掉之前的 flex 属性 */
    padding: 20px 30px;
}