动态表格导致页脚无法固定在页面底部的技术问题

你的问题核心出在html和body的高度配置以及flex布局的细节上，直接按下面的方式修改CSS就能解决：

关键修改点 #

• 将html和body的height: fit-content替换为min-height: 100vh，确保页面至少占满整个视口高度，同时能随动态表格的内容自动扩展
• 给footer添加flex-shrink: 0，防止页脚被内容区域压缩
• 移除body上多余的position: relative，flex布局不需要这个属性

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>-</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            min-height: 100vh; /* 改为min-height:100vh，确保页面至少占满视口 */
            display: flex;
            flex-direction: column;
        }
        body {
            font-family: Agdasima, sans-serif;
            background-color: #324ebf;
            /* 移除不必要的position: relative */
        }
        header {
            background-color: #2b2189;
            color: white;
            padding: 10px;
            text-align: center;
            border-bottom: 4px solid #1a1358;
        }
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
            flex: 1 0 auto; /* 让内容区域自动填充剩余空间 */
            background-color: #324ebf;
        }
        .container h2 {
            color: white;
            text-align: center;
        }
        .song-table {
            width: 60%;
            max-width: 600px;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #ff69b4;
            font-size: 14px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #8b004b;
        }
        th {
            background-color: #c71585;
            color: white;
        }
        td {
            background-color: #ff69b4;
            color: black;
        }
        .content-bottom-padding {
            padding-bottom: 50px; /* 保留这个内边距防止内容贴到页脚 */
        }
        footer {
            background-color: #2b2189;
            color: white;
            text-align: center;
            padding: 10px;
            border-top: 4px solid #1a1358;
            width: 100%;
            flex-shrink: 0; /* 固定页脚，不被压缩 */
        }
    </style>
</head>
<body>

<header>
    <h1>test</h1>
</header>

<div class="container content-bottom-padding">
    <h2>abc</h2>
    <div id="table-container">
        <!-- Placeholder for dynamically inserted table -->
    </div>
</div>

<footer>
    <p>xyz</p>
</footer>

</body>
</html>

原理说明 #

用min-height: 100vh替代height: fit-content后，页面会先占满整个浏览器视口高度，当动态表格内容增多时，页面高度会自动扩展。flex布局中，flex:1的内容区域会填充header和footer之外的所有空间，flex-shrink:0则保证页脚始终保持自身高度，不会被内容挤上去或重叠。

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