React JS实现Header、主内容区与Footer布局时仅显示页头的问题求助

核心问题定位 #

• 元素零高度渲染：当前<header>和<footer>都是空节点，仅设置了固定定位与背景色，未设置内部内容、内边距、显式高度。其中Header因为配置了25px的上下内边距，能撑出50px的可视高度，所以你能看到蓝色的Header块；但Footer没有任何撑高规则，渲染后实际高度为0，哪怕绑定了视口底部定位规则，也只是一条不可见的零高度线条
• 样式与DOM不匹配：预先写好的.container主内容区样式，没有在JSX结构中对应渲染的节点，完全没有生效
• 定位规则缺漏：<header>设置了position: fixed但未指定top: 0偏移值，元素会受浏览器默认body的8px外边距影响，出现位置偏移；固定定位的元素脱离文档流后，没有弹性布局规则配合的话，会直接遮挡下方内容
• 默认样式未清除：浏览器自带的body 8px外边距，会打乱通栏布局的对齐效果

修正参考实现 #

1. 调整CSS规则

/* 清除浏览器默认边距 */
body {
  margin: 0;
}
.App {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.header{
    background-color: #007FC0;
    width: 100%;
    position: fixed;
    top: 0;
    padding: 25px 0;
    height: 60px;
    box-sizing: border-box;
}
.container{
    flex : 1 1 auto;
    color: #333;
    /* 预留上下空间，避开固定定位的Header、Footer遮挡 */
    margin-top: 110px;
    margin-bottom: 70px;
}
.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #16192C;
    color: white;
    box-sizing: border-box;
}

2. 调整React组件结构，补全缺失的主内容区与标签内部占位

import React from 'react';
import './app-styles.css'
function HomePage() {
  return (
    <div className="App">
        <header className="header">
          导航栏内容
        </header>
        <main className="container">
          页面主内容区域
        </main>
        <footer className="footer">
          页脚版权信息
        </footer>
    </div>
  );
}
export default HomePage;

验证效果 #

修正后，顶部固定的蓝色Header通栏、底部固定的深色Footer通栏会正常展示带背景色的块级元素，中间主内容区会铺满视口剩余空间，不会被上下固定元素遮挡。

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