使用 CSS 从父级的兄弟姐妹中占据宽度答案

【问题标题】：Occupy width from sibling of parent with CSS使用 CSS 从父级的兄弟姐妹中占据宽度
【发布时间】：2019-05-06 23:44:42
【问题描述】：

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

<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-primary > .nav-side) 写在 'nav' 元素内。

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

例如，我不希望将左侧导航面板放置在部分内容之上（使用固定位置或其他东西）。它必须放在使用相同 HTML 结构共享总宽度的部分内容的左侧。

提前致谢

【问题讨论】：

上面定义的 HTML 将作为 - 您的导航栏将分为 2 部分 - 徽标和导航，并且在其下您将拥有内容部分

标签： html css sass

【解决方案1】：

您可以结合使用 CSS-grid 和 display:contents (https://caniuse.com/#feat=css-display-contents) 通过保持相同的 HTML 结构来实现此目的：

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;
}

<body>
  <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>
</body>

【讨论】：