HTML布局异常：<Header>在<body>外却被纳入<body>，求解决方案

核心原因 #

你的问题并非flex容器缺失导致，而是HTML标签闭合错误触发了浏览器的容错渲染机制，自动将<header>移入<body>内。具体错误点：

• <nav class="title-bar">标签未闭合，导致后续的<div class="title-bar-controls">和<section>结构混乱
• <header>内多余的</div>标签进一步破坏了DOM结构

修复步骤 #

1. 修正HTML标签闭合：确保所有标签正确嵌套、闭合
2. 调整布局结构：将flex布局从<body>移至<body>内的专门容器，避免body的flex属性影响<header>的独立显示

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html>

<head>
  <link href="./css/portfolioFormatting.css" rel="stylesheet" type="text/css" media="all">
  <link rel="stylesheet" href="https://unpkg.com/98.css" />
  <script src="./98.css-main/build.js"></script>
  <script src="./98.css-main/server.js"></script>
</head>

<header class="window">
  <nav class="title-bar">
    <div class="title-bar-text">
      Portfolio Art
    </div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </nav>
  <section class="window-body">
    <p>helloWorld</p>
  </section>
</header>

<body>
  <div class="content-container">
    <aside class="window">
      <nav class="title-bar">
        <div class="title-bar-text">
          About Me
        </div>
        <div class="title-bar-controls">
          <button aria-label="Minimize"></button>
          <button aria-label="Maximize"></button>
          <button aria-label="Close"></button>
        </div>
      </nav>
      <section class="window-body" id="aboutMe">
        <img id="pfp" src="pfp.PNG">
        <h3>Name</h3>
        <p>My fanart and oc blog where I can post whatever</p>
        <button>Home</button>
        <button>Email</button>
        <button>LinkedIn</button>
      </section>
    </aside>

    <main>
      <article class="window">
        <nav class="title-bar">
          <div class="title-bar-text">
            Work
          </div>
          <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
          </div>
        </nav>
        <section class="window-body">
          <img id="work" src="./artWork/Ink_Rat.webp">
          <section class="workText">
            <b>Name of Work</b>
            <p>Info About Work</p>
          </section>
        </section>
      </article>
    </main>
  </div>
</body>

</html>

CSS代码

header {
  border-top: 2.5vh solid transparent;
  margin: 0 auto;
  max-width: 70%;
}

body {
  background-color: pink;
  margin: 0;
}

.content-container {
  display: flex;
  margin: 0 auto;
  max-width: 70%;
}

aside {
  width: 30%;
}

section {
  align-items: center;
  align-content: center;
  text-align: center;
  width: fit-content;
}

section .workText {
  text-align: left;
}

.banner {
  height: 10%;
}

#work {
  width: 80%;
  height: auto;
}

#pfp {
  width: 100%;
  height: auto;
}

额外说明 #

• 原CSS中header的border-top属性缺少边框样式，导致边框无法显示，已补充
• 将flex布局移至专门的内容容器，符合语义化布局规范，同时避免body的flex属性干扰header的渲染

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