如何仅使用CSS创建此效果？

Question

所以我的HTML无法改变，我有一定的设计，我的目标。而且我还不能使用JS。

也只是一个注释，容器实际上是屏幕上所有其他元素的父级。然而，我之所以这样画的原因是因为那是我想要的外观，如果可能的话，当我向下滚动滚动的唯一东西是元素3和4时，3和1保持固定。目前，容器是柔性盒。我拥有的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

  

当我向下滚动滚动的唯一东西是元素3和4

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

align-items: flex-end; / content上的article会使它们保持正确对齐，而flex-grow: 1 / container上的content会使它们填满剩下的空间。

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你快到了。

只需将article设置为与#content具有相同的宽度，然后设置 justify-content:flex-end上的#container。

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

article {
    order: 4;
    width:65%;
}

＆＃13;

＆＃13;

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

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

#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;
  width: 65%;
  background: cyan;
}

footer {
  background-color: magenta;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;