Css网格嵌套Divs-嵌套Divs的底行将不会填充较大的Div

Question

我对网页设计还很陌生，但是一直在努力建立一个棒球研究网站，最终使我开始编写代码。我在CSS网格布局中取得了一些成功，但是在“主页”页面上的嵌套项或主要内容出现了永久性错误。随着站点上的其他任务不断出现或迫在眉睫，需要进行纠正。这些面板很棒，我将不胜感激。谢谢。这是问题和代码：

我有一个响应式布局，该布局使用媒体查询来查询3种不同的屏幕尺寸，分别为> 700px，<500px和<700 px。在我的主要中心栏中，有2x2的“内容” div，其中包含4个网格区域。 问题是，嵌套div的底部行没有延伸到父div的底部，当div达到一定高度时，这会激怒。

在附图中，您可以看到黑色的较大“内容” div的边框，而嵌套的半透明白色嵌套div则在黑色边框之前停止。在我能想到的任何CSS类中，Margin-bottom都设置为0。代码也附带了，但是我在这里密集的代码发布中还是新手，所以不知道最好的方法：）到目前为止，我都不太喜欢编码。谢谢大家！

HTML：

<article class="content">
            <div class="one">
              <img src="morsecrazy.jpg" alt="morsecrazy">
              <p>Loremssss<p>

   </div>
        <div class="three">
            <h4>The Old Recent Research/Articles/Charts</h4>
            <ul>
                <li>Data Thing</li>
                <li>You Won't Believe Thing</li>
                <li>Article Thing</li>
                <li>Thing Another</li>
                <li>Thing</li>
            </ul>
        </div>
        <div class="four">4</div>
    </article> 

CSS：

.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
padding: 0px;
grid-template-areas: 
    "one one"
    "three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
border: solid black;}

.one {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.one img {
  border-radius: 12px;
  float: right;
  clear: right;
  }
.three {
    grid-area: three;
  }
.three h4 {
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
.three ul {
   list-style-type: auto;
    padding-left: 20px;
    padding-right: 5px;
  }
.three ul li {
  padding-bottom: 15px;
}
  .four {
    grid-area: four;
  }




.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      content"
      "footer  footer";}
  nav ul {
    display: flex;
    justify-content: space-between;}
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"}
   nav ul {
     flex-direction: column;
     padding-bottom: 10vh; }
   .main-nav ul li {
    padding-bottom: 5vh;}
}

我尝试过的解决方案/无法解决的问题：

-在特定班级中，身高100％是否有问题或缺某处？

-。list样式类型。.3ul？

-我的媒体查询的行/列拆分与“内容” CSS类中的内容不同？**（大）

-其他较弱的补救措施：）

**对于那个嵌套的div来说，“网格区域”的存在可能是不必要的还是有问题？最初，我希望在那里的2x2网格不会填满左上角的div，而只会移动所有元素，所以我在网格区域内制作了网格区域-但是媒体查询/响应式布局有不同的布局？] >

简而言之，为什么嵌套的div不会“ 3”和“ 4”填满整个div？

它的底边空白实际上是0！谢谢。请让我知道我是否可以提供任何协助。

IMAGE!!!! nested divs "three" and "four" don't fill their parent div (border of larger div in black)

我对网页设计还很陌生，但是一直在努力建立一个棒球研究网站，最终使我开始编写代码。我在CSS网格布局中取得了一些成功，但是有了...

Answer 1

您可能错过了设置属性高度：类“三”和类“四”的div的100％。