如何仅使用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上的content将使它们保持正确对齐，然后flex-grow: 1 container / content上的flex-grow: 1将使它们填充剩余的空间。

堆栈片段

 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> 

Answer 2

你快到了。

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

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

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

---

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

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