网格布局与侧边栏重叠

Posted 2023-03-07

【中文标题】网格布局与侧边栏重叠

【英文标题】：Grid layout overlap with Side Bar

【发布时间】：2021-10-08 14:42:22

【问题描述】：

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

我已经包含了 Image 来解释，还添加了 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>

【问题讨论】：

@user3733831 我用屏幕截图创建了新问题。请帮帮我

你想让侧边栏和主要内容并排吗？如果是，请使用：` #page display: flex;高度：计算（100vh - 30px）； ` 我删除了 flex-direction: 列并正确设置了 flex 属性。

如果你要使用 flex and or grid，你可以从一开始就这样做，避免你的 calc() 东西 bob 。您可以让codepen.io/gc-nomade/pen/zYwLmON 随意激发并使用它的模板示例。

【参考方案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;

注意：您已将类选择器. 用于内容。应该是#。检查 codepen.io 链接

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

【参考方案2】：

我发现了两个问题：

display: flexbox 无效 - 它只是 flex 您的内容有一个ID，但您定义了一个类.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>

【讨论】：

谢谢大家的回答.. 很大的帮助