React页脚异常固定问题求助：页面扩展后未随页面底部移动

问题根源 #

你的页脚设置了position: absolute; bottom: 0，这个属性会让页脚脱离正常文档流，固定在浏览器视口的底部，而非页面内容的实际底部。当页面内容扩展超过视口高度时，页脚不会随之移动到页面最下方。

修复方案 #

修改App.css中#footer的样式，移除绝对定位相关属性，利用已有的Flex布局特性实现“粘性页脚”：

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    clear: both;
    /* 新增：消除body默认margin导致的布局偏移 */
    margin: 0;
}

#wordclouds {
    flex: 1;
}

#footer {
    text-align: center;
    /* 移除以下绝对定位属性 */
    /* position: absolute; */
    /* bottom: 0; */
    width: 100%;
    padding: 10px;
    /* 可选：避免padding导致宽度溢出 */
    box-sizing: border-box;
}

原理说明 #

你已经在body上配置了display: flex; flex-direction: column; min-height: 100vh，这套设置的作用是：

• body作为Flex容器，将子元素垂直排列
• min-height: 100vh确保容器至少占满整个视口高度
• #wordclouds的flex: 1会让它占据容器中除页脚外的所有剩余空间：当内容不足时，页脚被推到视口底部；当内容超过视口高度时，页脚会自然跟随内容移动到页面最下方

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