寻找在此布局中正确实现 <main> 标记的方法

Question

我正在为一个项目布置 HTML，正如您在合并图片上看到的那样，我遇到了有关正确实施 <main> 标记的问题。

我的布局在边栏和内容上方有内容 header，这使我无法将边栏保留在 main 标记之外。

有人有解决办法吗？

我尝试将侧边栏代码放在 HTML 结构中的内容下方，并如图所示使用 flexbox 反向行显示它，但是一旦我将我想要的内容包裹在 <main>语义标签，一切都坏了。

Answer 1

使用display: contents; 停止对布局产生任何影响的main 元素。然后布局它的 children 就好像它们是 main 的兄弟姐妹而不是它的 children。

body {
  background: black;
  display: grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header header" "content-header content-header content-header" "sidebar content content";
  margin: 0;
  padding: 0;
  height: 100vh;
}

header {
  background: #aaf;
  grid-area: header;
}

main {
  display: contents;
}

main header {
  background: #faa;
  grid-area: content-header;
}

main #content {
  background: #afa;
  grid-area: content;
}

aside {
  background: #aff;
  grid-area: sidebar;
}

<header>
  header
</header>
<main>
  <header>
    content header
  </header>
  <div id="content">
    content
  </div>
</main>
<aside>
  sidebar
</aside>

寻找在此布局中正确实现 <main> 标记的方法

Finding a way to properly implement <main> tag in this layout

html

css

flexbox

semantic-markup