javascript - 如何将两个部分正确放置在另一个下面？

Question

我正在尝试添加 2 个部分，分别在另一个下面添加类“intro”和“content”，这样每当我调整窗口大小时，该部分就会与文本一起调整大小(我管理了这个)。但现在我添加了第二部分，当调整窗口大小时，第二部分保持在相同的位置，但随着第一部分的高度变大，它应该向下移动一点。我认为它与第二部分的“顶级”属性有关，但我自己似乎无法弄清楚。

jsfiddle 链接:https://jsfiddle.net/raichibald/gpjfL5mk/10/

HTML代码:

<section class="intro">
      <div class="container">
        <h1 class="section-heading">
          Lorem ipsum dolor sit amet.
        </h1>
        <p>text</p>
      </div>
    </section>

    <section class="content">
      <div class="container">
        <div>
          <h1 class="section-heading">
            Lorem ipsum dolor sit amet.
          </h1>
          <p>text</p>
        </div>
      </div>
    </section>

CSS 代码:

.intro {
  min-height: 30vh;
  max-height: auto;
  position: absolute;
  display: flex;
  top: 10vh;
}
.intro .container {
  background: red;
}
.container {
  width: 100%;
}
.section-heading {
  text-align: center;
  margin: 4vh auto 0 auto;
  font-weight: 500;
  letter-spacing: 1px;
}
.content {
  min-height: 30vh;
  position: absolute;
  display: flex;
  top: 40vh;
}
.content .container {
  background: #b3bfb8;
}

我希望随着第一部分变大(即使我添加了 5000 行文本)，第二部分会自动从当前顶部位置向下移动，但有些地方不对。

Answer 1

所以，我基本上删除了您的 css，但我有一个工作解决方案，它的行为非常复杂，代码更少。

我建议您看一下并在必要时将您的任何样式替换到其中？

HTML

<section class="intro">
  <div class="container">
    <h1 class="section-heading">
      Lorem ipsum dolor sit amet.
    </h1>
    <p>text</p>
  </div>

<section class="content">
  <div class="container">
    <div>
      <h1 class="section-heading">
        Lorem ipsum dolor sit amet.
      </h1>
      <p>text</p>
    </div>
  </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: auto;
  padding: 40px;
}

.intro {
   background-color: red;
}

.content {
  background-color: gray;
}

如果您有任何问题或希望我提供更多示例，请告诉我，我非常乐意提供帮助!

看看 JS Fiddle:https://jsfiddle.net/hzLw0db3/