如何使用固定侧边栏获得 100% 高度布局？答案

【问题标题】：How can I get 100% height layout with a fixed sidebar?如何使用固定侧边栏获得 100% 高度布局？
【发布时间】：2020-04-26 23:47:16
【问题描述】：

我有一个非常经典的布局，但奇怪的是，我无法弄清楚它有什么问题。

我有一个固定的侧边栏（15% 宽度）和内容（85% 宽度）并排。

我将 100% 的高度分配给所有容器。

<html>
<body>
 <did id="content">
   <div id="primary" class="content-area">
    <main id="main" class="site-main">  
    <div class="content">
        <section class="category_intro">

我面临的问题是，在某些页面中，.content 容器中的部分与相互重叠..我不明白为什么。

当我检查元素时，我可以看到指针没有覆盖所有容器

我都试过清除，溢出自动，一个一个删除所有容器的100％高度属性，停止使用flexbox..

可能是因为我的侧边栏位置固定？

有没有一种简单的方法可以在使用 flexbox 内容的固定侧边栏后恢复流程？

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

今天，构建布局的最佳方式是使用CSS grid。将 display:grid; 应用于 2 个主要元素的父元素并使用 grid-template-columns: 15% 85%; 将为您完成一切。

body {
  height: 100vh;
  
  display: grid;
  grid-template-columns: 15% 85%;
}

aside {
  background-color: blue;
}

main {
  background-color: green;
}

<body>
  <aside></aside>
  <main></main>
</body>

【讨论】：

好的 Robinvrd，我接受你的回答，因为网格系统似乎是一个很好的解决方案！谢谢！