网格布局与侧边栏重叠

Question

我正在尝试创建博客设计。我需要 side bar 、 navigation 、 footer 和 main content area 的地方。我在顶部创建了带有一些链接的导航。带有一些示例文本的边栏。我已经使用 flexbox 创建了页面，并尝试使用 grid 创建主要内容区域。我计划将网格划分为三个相等的区域，并将使用一些卡片将内容放在那里。现在，主要内容区域与侧边栏重叠。我不确定如何修复它。我已经创建了边栏、导航和主要内容区域。我使用了使用 flexbox 的主页，我需要在 flex 框中创建一个网格，并将网格分成相等的三列，以便我可以容纳一些内容。我的网格与侧边栏重叠，一直到侧边栏。 [![在此处输入图片描述][1]][1]

我已经附上图片来解释，还添加了带有JSfiddle的代码以供参考。 [1]: https://i.stack.imgur.com/EsImd.png

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background-color: seashell;
}

#page {
  display: flexbox;
  height: calc( 100vh - 30px);
  flex-direction: column;
}

#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}

.content {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

.one {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.two {
  background-color: blue;
}

.three {
  background-color: purple;
}

.box {
  background-color: #444;
  grid-template-rows: 5;
  grid-template-columns: 10;
  color: #fff;
  border-radius: 5px;
  padding: 30px;
  font-size: 150%;
}

.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  align-items: baseline;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}

<div id="header">
  <navbar>
    <ul class="nav-list">
      <li class="nav-item">
        <a 
          href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
          class="twitter-share-button" 
          data-show-count="false"
        >Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </li>
      <li class="nav-item">
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">
          lang: en_US
        </script>
        <script type="IN/Share" data-url="https://www.linkedin.com"></script>
      </li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item">Login</li>
    </ul>
  </navbar>
</div>

<div id="page">
  <div id="sidebar">
    <div>
      My profile
    </div>
    <div>
      My interest
    </div>
  </div>
  <div id="content">
    <div class="one">
      one
    </div>
    <div class="one">
      two
    </div>
    <div class="one">
      three
    </div>
  </div>
</div>

Answer 1

更改 #page 选择器的样式

#page {
  display: flex; /*display:flex; not flexbox */
  height: calc( 100vh - 30px);
  flex-direction: row; /* Change flex-direction to column*/
}

并根据您的要求在 CSS 下方添加到 #content 选择器

#content {
  flex:1;
  display: grid;
  grid-template-columns: repeat(3,1fr)
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

注意：您已经为内容使用了 class 选择器 .。应该是 #。检查 codepen.io link

https://codepen.io/emmeiWhite/pen/GRmBQbR

Answer 2

我发现了两个问题：

display: flexbox 无效 - 只是 flex
您的内容有一个 ID 但您定义了一个 class .content

如果您希望两个元素并排放置，则应省略 flex-direction: column。

顺便说一下：如果您将所有三个内容元素都设置为 40% 宽度，您将会溢出 (3 x 40% = 120%)...

工作示例：（我删除了未使用的 CSS-样式）

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background-color: seashell;
}

#page {
  display: flex;
  height: calc(100vh - 30px);
}

#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}

#content {
  display: grid;
  grid-template-columns: 40% 40% 40%;
  grid-template-rows: auto;
  background-color: #2196F3;
  padding: 10px;
}

.one {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  align-items: baseline;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}

<div id="header">
  <navbar>
    <ul class="nav-list">
      <li class="nav-item">
        <a 
          href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
          class="twitter-share-button" 
          data-show-count="false"
        >Tweet</a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </li>
      <li class="nav-item">
        <script src="https://platform.linkedin.com/in.js" type="text/javascript">
          lang: en_US
        </script>
        <script type="IN/Share" data-url="https://www.linkedin.com"></script>
      </li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item"><a href="#">Article</a></li>
      <li class="nav-item">Login</li>
    </ul>
  </navbar>
</div>

<div id="page">
  <div id="sidebar">
    <div>
      My profile
    </div>
    <div>
      My interest
    </div>
  </div>
  <div id="content">
    <div class="one">
      one
    </div>
    <div class="one">
      two
    </div>
    <div class="one">
      three
    </div>
  </div>
</div>

网格布局与侧边栏重叠

Grid layout overlap with Side Bar

html

css

layout

flexbox