父级与CSS的同胞占用宽度

Question

根据HTML5标签的语义，我设计了一个网页。 HTML主体的基本结构如下

<nav class="nav-primary">
 <div class="heading-primary">
   <!-- Logo & links of webpage -->
 </div>
 <div class="nav-side">
   <!-- Left side navigation of the page -->
 </div>
</nav>
<section class="section-content">
  <!-- Contents of the web page -->
</section>

最终网站的外观应如下所示

我想到了语义，并在'nav'元素内写了左侧导航面板（.nav-primary> .nav-side）。

有什么方法可以构造左导航面板以占据部分内容（.section-content）的一定百分比的宽度。

就像，我不希望将左侧导航面板放置在栏目内容上方（使用固定位置或其他方式）。必须将其放置在使用相同HTML结构共享总宽度的部分内容的左侧。

预先感谢

Answer 1

您可以结合使用CSS网格和 const userData = await User.findAll({ include: [ { UserStatus, SurveyResult, include: [Survey] } ] }) .map(user => user.toJSON()) （https://caniuse.com/#feat=css-display-contents），以保持相同的HTML结构：

display:contents

body {
  margin:0;
  height:100vh;
  display:grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 100px 1fr;
  grid-template-areas: 
    "header header"
    "side content";
}
nav.nav-primary {
  display:contents;
}
.heading-primary {
  grid-area:header;
  background:red;
}
.nav-side {
  grid-area:side;
  background:blue;
}
.section-content {
  grid-area:content;
  background:green;
}