如何僅使用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>