CSS Grid布局设置后section内容无法显示在nav与footer正确位置求助

问题成因 #

• 网格区域名称不匹配：CSS Grid模板中定义section对应的区域名称是section，但给section元素设置的grid-area值为content，导致section元素无法被放置到导航栏和页脚之间的指定网格位置，布局错乱。
• 固定定位的header脱离文档流：header设置了position: fixed属性后会脱离正常文档流，不再占用原有网格空间，会导致下方导航栏上移，同时header如果未显式设置宽高，尺寸也会出现异常。
• id属性格式错误：HTML中元素的id属性不需要加#前缀，当前写的id="#P2"、id="#P5"属于错误写法，会导致锚点跳转失效。
• 冗余代码：nav元素重复声明了background-color属性，left:0ex、right:0ex在relative定位下未配合偏移属性使用，属于无效代码。

修复方案 #

1. 修正section的grid-area值，改为和模板一致的section
2. 如果不需要header固定在页面顶部，直接删除header的position: fixed属性即可；如果需要固定效果，要给header显式设置宽高，同时给article添加对应上内边距抵消header脱离文档流带来的偏移
3. 修正HTML中id属性的写法，去掉#前缀
4. 删除nav中的冗余无效代码
5. 可选：给全局添加默认边距清零，避免浏览器默认边距导致的布局偏移

修复后CSS代码 #

/* 可选：清零浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
article {
    display: grid;
    grid-template-rows: 20vh 10vh auto 10vh;
    grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
    grid-template-areas: ". header header header header ."
    ". nav nav nav nav ."
    ". section section section section ."
    ". footer footer footer footer ."
}
header { 
    grid-area: header; 
    background-color: whitesmoke; 
    /* 不需要固定就删掉下面注释内容，需要固定的话取消注释即可
    position: fixed;
    width: 80vw;
    height: 20vh;
    */
}
nav { 
    grid-area: nav; 
    background-color:lightskyblue; 
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: auto;
    align-items: center;
    position: relative;
    font-family: Kanit;
}
section { 
    grid-area: section; 
    background-color: whitesmoke; 
}
footer { 
    grid-area: footer; 
    background-color: lightskyblue; 
}

div.pi{
    width: 60vh;
    height: 40vh;
    margin: 0;
    font-family: Ubuntu;
}
h1{
    margin: 0;
}

修复后HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Introduce Myself</title>
        <link rel="stylesheet" type="text/css" href="indexDemo.css">
    </head>
    <body>
        <article>
            <header> </header>
            <nav>
                <a class="guilding" href="#P2">Personal Information & Career Goal</a>
                <a class="guilding" href="#P3">Education</a>
                <a class="guilding" href="#P4">Work Experience & Placements</a>
                <a class="guilding" href="#P5">Skills</a>
                <a class="guilding" href="#P6">Hobbies & Interests & Achievements</a>
            </nav>
            <section> 
                <div class="pi">
                    <h1 id="P2">Personal Information</h1>
                    <p>concrete contents
                    </p>
                </div>
                <div class="photo">

                </div>
                <div class="pic">

                </div>
                <div class="cg">

                </div>
                <div id="P5">

                </div>
            </section>
            <footer> </footer>
        </article>
    </body>
</html>

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