如何用 CSS 中的 div 标签填充空间？（包括图片）

Question

我是一名新手，在自己学习 HTML 和 CSS 方面，并且一直在几个视频的指导下尝试编码。显然，我必须通过这种方式来解决知识差距。

不管怎样，我已经从我的头脑中“设计”了一个CSS布局，这样可以帮助我在学习的过程中进一步推进。这是图像，我希望它具有图像布局

代码的输出如下所示：结果

我一直在试图弄清楚如何在左侧和右侧的标题 div 下方对齐一个 div，以完全填充黑色空间。

我的代码如下：

body {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  color: blue;

  margin: 0;

  padding: 0;

  width: 100%;

  background-color: black;

  background-size: cover;

  background-repeat: no-repeat;

}

.Header {

  height: 191px;

  background: #808080;

  border: 1px solid #000000;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 30px;

}

.contentwrap {

  width: 1025px;

  margin: 0 auto;

}

.container {

  background: #808080;

  border: 1px solid #000000;

  height: 190px;

}

.footer {

  background: #808080;

  border: 1px solid #000000;

  height: 129px;

}

<div class="Header">

  <h1> Header </h1>

</div>

<div class="contentwrap">

  <div class="container">

    <p> Text </p>

  </div>

  <div class="container">

    <p> Text </p>

  </div>

  <div class="container">

    <p> text </p>

  </div>

  <div class="container">

    <p> text </p>

  </div>

  <div class="footer">

    <p> footer </p>

  </div>

</div>

Answer 1

body {&nbsp; font-family: Verdana, Arial, Helvetica, sans-serif;&nbsp; color: blue;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; background-color: black;}.Header {&nbsp; height: 191px;&nbsp; background: #808080;&nbsp; border: 1px solid #000000;&nbsp; text-align: center;&nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; font-size: 30px;}.content {&nbsp; display: flex;}.content__sidebar {&nbsp; width: 200px;&nbsp; min-height: 100%;}.content__sidebar--left {&nbsp; background-color: red;}.content__sidebar--right {&nbsp; background-color: green;}.content__main {&nbsp; flex: 1;}.container {&nbsp; background: #808080;&nbsp; border: 1px solid #000000;&nbsp; height: 190px;}.footer {&nbsp; background: #808080;&nbsp; border: 1px solid #000000;&nbsp; height: 129px;}<div class="Header">&nbsp; <h1> Header </h1></div><div class="content">&nbsp; <div class="content__sidebar content__sidebar--left"></div>&nbsp;&nbsp; <div class="content__main">&nbsp; &nbsp; <div class="container">"&nbsp; &nbsp; &nbsp; <p> Text </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <p> Text </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <p> text </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <p> text </p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="content__sidebar content__sidebar--right"></div></div><div class="footer">&nbsp; <p> footer </p></div>

Answer 2

丑陋的方式： https: //codepen.io/stefantigro/pen/bGdZyeX<div class="Header">  <h1> Header </h1></div><div class="">  <div class="right-side side">  </div>  <div class="middle">    <div class="container">    <p> Text </p>  </div>  <div class="container">    <p> Text </p>  </div>  <div class="container">    <p> text </p>  </div>  <div class="container">    <p> text </p>  </div>  <div class="footer">    <p> footer </p>  </div>  </div>  <div class="left-side side">  </div></div>body {  font-family: Verdana, Arial, Helvetica, sans-serif;  color: blue;  margin: 0;  padding: 0;  width: 100%;  background-color: black;  background-size: cover;  background-repeat: no-repeat;}.Header {  height: 191px;  background: #808080;  border: 1px solid #000000;  text-align: center;  font-family: Arial, Helvetica, sans-serif;  font-size: 30px;}.contentwrap {  margin: 0 auto;}.container {  background: #808080;  border: 1px solid #000000;  height: 190px;  display: block;}.footer {  background: #808080;  border: 1px solid #000000;  height: 129px;}.middle{  display: inline-block;  width: 60%;  height: 100%;}.right-side{  background: blue;}.left-side{  background: red;}.side{  margin: 0;  width: 19%;  height: 800px;  display: inline-block;}这里的问题是我们使用设定的尺寸，并且井的尺寸各不相同，尤其是从显示器到显示器。