时间戳

首页 > 解决方案 > 如何防止网格区域的内部内容向下突出？

css - 如何防止网格区域的内部内容向下突出？

问题描述

我一直致力于构建一个包含一些“面板”和“行”的网格布局区域。每个面板由标题和主要元素组成，其中一些主要元素内部有一些项目。

这是我的演示。https://codepen.io/bunatree/pen/Vwjqmod

#canvas {
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template:
    "bar1   bar1  "
    "panel1 panel2"
    "bar2   bar2  "
    "panel3 panel4"
    /1fr    1fr
}

#sidebar {
  grid-area: side;
  background-color: #c99;
}

#panel1 {
  grid-area: panel1;
}

#panel2 {
  grid-area: panel2;
}

#panel3 {
  grid-area: panel3;
}

#panel4 {
  grid-area: panel4;
}

#bar1 {
  grid-area: bar1;
}

#bar2 {
  grid-area: bar2;
}

.panel {
  padding: 10px;
  background-color: #ccc;
}

.bar {
  background-color: rgba(0,128,255,0.5);
  padding: 20px;
}

header {
  background-color: #9c9;
  padding: 10px;
}

main {
  min-height: 30px;
  padding: 10px;
  background-color: #c9c;
  /* I set this 100% height here so that
     the bottom of the main area reaches
     the bottom of the panel div. */
 height: 100%;
}

.item {
  background-color: #cc9;
  padding: 10px;
  margin: 10px 0;
}
<div id="canvas">
  <div class="bar" id="bar1">Bar 1</div>
  <div class="panel" id="panel1">
    <header>Panel 1</header>
    <main>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </main>    
  </div>
  <div class="panel" id="panel2">
    <header>Panel 2</header>
    <main>
      <div class="item">Item 1</div>
    </main>    
  </div>
  <div class="bar" id="bar2">Bar 2</div>
  <div class="panel" id="panel3">
    <header>Panel 3</header>
    <main>
    </main>      
  </div>
  <div class="panel" id="panel4">
    <header>Panel 4</header>
    <main>
      <div class="item">Item 1</div>
    </main>
  </div>
</div>

但是，它使主要区域向下突出。

一些主要元素向下溢出。

没有 100% 高度设置，溢出问题得到解决，但主要元素的高度适合内部项目的总高度。

没有设置 100% 高度，当没有内项时，主元素的高度会变短。

所以，我的问题是如何扩展主元素的高度而不把它伸出来，而不管内部项目的数量是多少。

如果有人帮助我，我会很高兴。谢谢你。

标签： cssgrid-layout

解决方案

自己解决了这个问题。

我不得不;

  • 停止对主要元素使用 100% 高度。（这使它从网格区域溢出。）
  • 将 display: flex 和 flex-direction: column 设置为 .panel 元素。
  • 将 flex-grow: 1 设置为主要元素以垂直扩展它。

运行下面的代码，您将看到主元素（背景：紫色）的高度垂直适合面板元素的内部（背景：灰色）。

#canvas {
  padding: 10px;
  display: grid;
  gap: 10px;
  grid-template:
    "bar1   bar1  "
    "panel1 panel2"
    "bar2   bar2  "
    "panel3 panel4"
    /1fr    1fr
}

#panel1 {
  grid-area: panel1;
}

#panel2 {
  grid-area: panel2;
}

#panel3 {
  grid-area: panel3;
}

#panel4 {
  grid-area: panel4;
}

#bar1 {
  grid-area: bar1;
}

#bar2 {
  grid-area: bar2;
}

.panel {
  padding: 10px;
  background-color: #ccc;
  /* Set flex here,
     and set flex-grow: 1 for the main element. */
  display: flex;
  flex-direction: column;
}

.bar {
  background-color: rgba(0,128,255,0.5);
  padding: 20px;
}

header {
  background-color: #9c9;
  padding: 10px;
}

main {
  min-height: 30px;
  padding: 10px;
  background-color: #c9c;
  /* Use not height here but flex in the .panel element,
     and set flex-grow:1 here. */
  /* height: 100%; */
  flex-grow: 1;
}

.item {
  background-color: #cc9;
  padding: 10px;
  margin: 10px 0;
}
<div id="canvas">
  <div class="bar" id="bar1">Bar 1</div>
  <div class="panel" id="panel1">
    <header>Panel 1</header>
    <main>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </main>    
  </div>
  <div class="panel" id="panel2">
    <header>Panel 2</header>
    <main>
      <div class="item">Item 1</div>
    </main>    
  </div>
  <div class="bar" id="bar2">Bar 2</div>
  <div class="panel" id="panel3">
    <header>Panel 3</header>
    <main>
    </main>      
  </div>
  <div class="panel" id="panel4">
    <header>Panel 4</header>
    <main>
      <div class="item">Item 1</div>
    </main>
  </div>
</div>

推荐阅读