如何用 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 {

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

  color: blue;

  margin: 0;

  padding: 0;

  background-color: black;

}

.Header {

  height: 191px;

  background: #808080;

  border: 1px solid #000000;

  text-align: center;

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

  font-size: 30px;

}

.content {

  display: flex;

}

.content__sidebar {

  width: 200px;

  min-height: 100%;

}

.content__sidebar--left {

  background-color: red;

}

.content__sidebar--right {

  background-color: green;

}

.content__main {

  flex: 1;

}

.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="content">

  <div class="content__sidebar content__sidebar--left"></div>

 

  <div class="content__main">

    <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>

  

  <div class="content__sidebar content__sidebar--right"></div>

</div>

<div class="footer">

  <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;

}

这里的问题是我们使用设定的尺寸，并且井的尺寸各不相同，尤其是从显示器到显示器。