HTML 部分与容器高度不匹配

Question

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

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

Answer 1

这是您的 parent 部分

<section id="references">

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

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

这是你的childclass

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

您的问题是由 parent class 引起的，您必须利用他们没有夸大它。例如：如果 4/4 平方是 parent class 和 child class 是 2/2。现在我想做 child class 6/6。是否可以。如果不定义 parent class.

的 css，你永远不会有所不同

如果你想使用 id，你必须写 css of parent class

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

HTML 部分与容器高度不匹配

HTML section doesn't match container height

html

css

containers