为什么我的容器内容溢出？答案

【问题标题】：Why are my container contents overflowing?为什么我的容器内容溢出？
【发布时间】：2022-08-02 22:55:46
【问题描述】：

我在背景 div 前面制作了一个与页面中心垂直和水平对齐的容器，其中包含 3 个元素（左面板、右面板和输出）。但是我试图调整高度以填充整个页面，但它会溢出并创建一个我试图避免的滚动条。我尝试了 height:100vh 和 height:100% 但两者都不起作用，因为内容仍然在页面下方。我不确定是什么原因造成的以及我做错了什么。我还尝试了其他答案中的一些解决方案，但它们并没有解决我的问题。

.body-background{
  width:100vw;
  height:100vh;
  background-image: url(assets/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calc-base{ 
  width:40vw;
  height: 100%;
  background-color: azure;
  margin:0;
}
.output{
  height:10vh;
  border:3px solid rgb(255, 150, 150);
}
.container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  min-height: 100%
}
.left-panel { grid-area: 1 / 1 / 4 / 3; 
  border-left:3px solid rgb(0, 179, 255);
  border-bottom: 3px solid rgb(158, 13, 255);
  float: left;    
  height: 100vh;
}
.right-panel { grid-area: 1 / 3 / 4 / 4;
  border-bottom: solid 3px black;
  border-right: 3px solid black;
  border-left:3px solid black;
  height: 100vh;
}

<div class=\"body-background\">
  <div class=\"calc-base\">
    <div class=\"output\">w</div>
      <div class=\"container\">
        <div class=\"left-panel\">
          &nbsp;
        </div>
        <div class=\"right-panel\">
          &nbsp;
        </div>
      </div>
    </div>
  <div>
<div>

如果右侧面板是视口的高度，并且您在其上方有一个标头，则“视口的高度”+“标头的高度”必须大于“视口的高度” \"。
我尝试更改这些值，但即便如此，我仍然只剩下几个像素边框溢出和滚动。很混乱

标签： html css

【解决方案1】：

你应该可以用 Flexbox 做你想做的一切。为此，您需要两个容器 1）用于列布局的 body-background 和 2）用于左右行布局的容器。我希望这有帮助。

从这里您可以使用 flex-grow 选项来增长和缩小单元格以占用空间。

body, div { 
  margin: 0 auto;
  box-sizing: border-box;
}

.body-background{
  width:100vw;
  height:100vh;
  background-image: url(assets/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.output{
  height:10vh;
  width: 100%;
  border:3px solid rgb(255, 150, 150);
}
.container {
  display: flex;
  width: 100%;
  flex-grow: 1;
}
.left-panel { 
   border: 3px solid black;
   flex-grow: 1;
}
.right-panel {
  border: 3px solid black;
  flex-grow: 3;
}

<div class="body-background">
    <div class="output">w</div>
    <div class="container">
      <div class="left-panel">
        &nbsp;
      </div>
      <div class="right-panel">
        &nbsp;
      </div>
    </div>
  <div>
<div>

【讨论】：