html - 如何仅使用 CSS 来创建这种效果？

Question

因此，我拥有无法更改的 HTML，并且我拥有特定的设计目标。我还不能为此使用 JS。

请注意，容器实际上是屏幕上所有其他元素的父元素。然而，我之所以那样画是因为那是我想要的外观，如果可能的话，当我向下滚动时，唯一滚动的是元素 3 和 4，而 3 和 1 保持固定。目前容器是一个 flex 盒子。我拥有的 CSS 并没有真正完成我需要它做的事情，但它是:

html,
body {
  min-height: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

#intro {
  background-color: yellow;
  width: 20%;
  order: 2;
}

#nav {
  background-color: red;
  width: 15%;
  order: 1;
}

#content {
  background-color: blue;
  width: 65%;
  order: 3
}

article {
  order: 4;
}

footer {
  background-color: magenta;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <article>
    <li><img src="http://via.placeholder.com/100x100"></li>
    <li><img src="http://via.placeholder.com/100x100"></li>
  </article>
</div>
<footer>...</footer>

Answer 1

as I scroll down the only thing that scrolls is element 3 and 4

使用 position: fixed 我们可以让 nav/intro/footer 在 content/article 滚动。

content/article 上的 align-items: flex-end; 将使它们保持右对齐，而 flex-grow : 1 on container/content 将使它们填充剩余空间。

堆栈片段

html {
  display: flex;                 /*  IE min-height bug fix  */
}

body {
  width: 100%;                   /*  using IE bug fix it need a width  */
  display: flex;
  flex-direction: column;
  min-height: 100vh;             /*  instead using precent all over  */
  margin: 0;
}

#container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 15%;
  height: calc(100% - 30px);     /*  make up for footer  */
  background-color: red;
}

#intro {
  position: fixed;
  left: 15%;
  top: 0;
  width: 20%;
  height: calc(100% - 30px);     /*  make up for footer  */
  background-color: yellow;
}

#content {
  background-color: lightblue;
  width: 65%;
  flex-grow: 1;
}

article {
  margin-bottom: 30px;           /*  make up for footer  */
}

article li {
  list-style: none;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: magenta;
}

<div id="container">
  <section id="intro">Intro</section>
  <div id="content">
    Content along with below article that will scroll and leave "Nav"/"Intro" fixed. <br>
    Content along with below article that will scroll and leave "Nav"/"Intro" fixed. <br>
  </div>
  <aside id="nav">Nav</aside>
  <article>
    <li><img src="http://via.placeholder.com/100x100"></li>
    <li><img src="http://via.placeholder.com/100x100"></li>
  </article>
</div>
<footer>Footer</footer>