HTML 部分与容器高度不匹配答案

【问题标题】：HTML section doesn't match container heightHTML 部分与容器高度不匹配
【发布时间】：2021-10-06 09:33:17
【问题描述】：

我制作了一个 HTML 部分。 child 是一个具有定义高度和一些其他 CSS 属性的容器。但据我所知，没有什么会改变父母。所以通常该部分会匹配这个容器的高度，但在这种情况下，它不会。为什么？

#referencesContainer {
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

<!--HTML section&container-->
<section id="references">
  <div id="referencesContainer" class="lockContainer">
    <h2 class="paddingBottom30"></h2>
    <span>
       <br>
       <br>
    </span>
  </div>
</section>

【问题讨论】：

你可以发布该部分的css吗？
我为您创建了一个片段，请编辑以便我们看到实际问题。
根据你的sn-p，section元素没有给定高度，所以它取其内容的高度，也就是容器的300px加上60px填充顶部和底部...
sn-p 没有父容器的所有详细信息。如果您可以创建完整的东西，那么协作将很容易。你可以更新这个：jsfiddle.net/geekays/mL1y9cak/1
不是答案，但请注意您通过padding 速记和padding-top 定义了两次填充

标签： html css containers

【解决方案1】：

这是你的父部分

<section id="references">

像这样为这个部分定义一个类

<section id="references" class="parentclass">

然后给创建这样的css

.parentclass{
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  }

这是你的子班

 <div id="referencesContainer" class="lockContainer">

如下定义他们的css

.lockContainer {
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

您的问题是由父类引起的，您必须使用它们并没有覆盖它。例如：如果 4/4 正方形是父类，子类是 2/2。现在我想让孩子上课 6/6。是否可以。如果不定义父类的 css，你永远不会有所不同。

如果你想像这样使用id，你必须编写父类的css

#references{
...
...
....
....
...
}

【讨论】：