javascript - 自动填充大量内容的div

Question

我有大量的内容是由html标签或纯文本组成的。

我有几个 div。

当第一个div无法包含所有内容时，如何将剩余内容自动填充到其他div。

如果有任何建议，非常感谢。 :)

--- 更新 ---

实际上，我正在制作自己的博客，其设计就像一本打开的书(左页和右页)，包含所有帖子。

每个帖子都是用 Markdown 文件编写的。最初，一个帖子只有一个左页。

当 mardown 文件解析为 html 代码时，我将尝试将结果 html 代码插入到我的书本帖子的“左页”中。

显然，如果结果html代码很大，一个“左页”不可能包含所有内容。这种情况下，我的博客会自动创建一个新的“右页”(或者当“右页'都不够)，其余内容应自动填充；

我要问的是如何检测我的“左页”div是否不足以包含所有结果html代码。以及如何剪切剩余内容并插入到“右页”中。我完全没有想想如何达到这个要求。

所以，如果有人之前已经这样做过，也许你可以给我一些提示。我将非常感激

Answer 1

再次编辑:好的，我将用纯 CSS 来制作它。您在评论中问我的是一个普通的帖子(在左侧)，如果左侧的帖子无法容纳其所有内容，则右侧会显示该帖子的副本，该副本可以容纳所有内容旧左侧的原始内容。

这是我从你给我的信息中了解到的。

@media (min-width: 601px) {
  #leftSide {
    float: left;
  }
  /*THIS IS ON THE LEFT SIDE*/
  h2 {
    font-size: 2.5em;
  }
  p {
    font-size: 1.5em;
  }
  #rightSide {
    display: none;
  }
}
@media (max-width: 600px) {
  #rightSide {
    display: block;
    float: right;
  }
  /*THIS IS ON THE RIGHT SIDE*/
  h2 {
    font-size: 1.5em;
  }
  p {
    font-size: 1em;
  }
  #leftSide {
    display: none;
  }

<div id="leftSide">
  <h2>Post 1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>

<div id="rightSide">
  <h2>Post #1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>