為什么 position 無法使用側邊欄？
[英]why is position sticky not working with sidebar?
問題描述
我正在嘗試創建一個側邊欄，但似乎無法使其具有粘性，
我需要totalWrapper （包括側邊欄（紅色）和 title ）在我們滾動過去之后head在body上
基本上黑框應該粘在藍框內，藍框是body的剩余高度
（黑色和藍色框只是為了解釋問題而添加的，並且是圖例，即實際代碼中不需要）
我覺得我犯了一個菜鳥的錯誤。
有人可以解釋我做錯了什么嗎？
* { text-align: center; } html { margin: 0; height: 100%; width: 100%; min-height: 100%; min-width: 100%; } body { margin: 0; height: 100%; width: 100%; min-height: 100%; min-width: 100%; } #header { width: 100%; height: 100px; background-color: pink; position: relative; } #main { position: absolute; left: 50%; transform: translate(-50%, 0); width: 50%; background-color: white; margin: auto; } #totalWrapper { position: sticky; top: 0; } #title { width: 100%; height: 50px; background-color: green; } #optionsWrapper { background-color: red; position: relative; height: 100vh; width: 50%; }
<:DOCTYPE html> <html> <head> </head> <body> <div id="header">head</div> <div id="main"> <div style="margin.5rem"> Lorem Ipsum is simply dummy text of the printing and typesetting industry, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book, It has survived not only five centuries, but also the leap into electronic typesetting. remaining essentially unchanged, It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div id="totalWrapper"> <div id="title">title</div> <div id="optionsWrapper"> option 1<br> option 2<br> option 3<br> option 4<br> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2021-03-30 08:27:33
好的，我做了一個我不太喜歡的“hack”，因為它感覺不干凈和優雅（我會繼續思考）。 不過，它可以完成工作。 我更改了 HTML 元素的順序，因為粘性部分需要位於主要內容之前。 我還稍微清理了 CSS 以擺脫不必要的代碼以使示例正常工作，這樣也更容易理解。
body { margin: 0; text-align: center; font-size: 18px; } #header { width: 100%; height: 100px; background-color: pink; } #stickyWrapper { position: sticky; height: 100vh; top: 0; } #title { height: 50px; background-color: green; } #sidebar { height: 100%; width: 50%; background-color: red; } #content { margin-top: calc(-100vh + 50px); /* =====> the negative height of the stickyWrapper plus the positive height of the header */ margin-left: auto; width: 50%; }
<div id="header">head</div> <div id="stickyWrapper"> <div id="title">title</div> <div id="sidebar"> option 1<br> option 2<br> option 3<br> option 4<br> </div> </div> <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
為什么我的位置：粘性不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.