滾動后如何使 DIV 拉伸到頁面底部
[英]How can I make an DIV stretch to the bottom of the page after scrolling
問題描述
我正在嘗試使用以下設計制作網頁：
一切看起來都很好，但是，如果右側的內容溢出頁面並且我必須向下滾動，則左側菜單欄（“second_navbar”）不會延伸到頁面的末尾。
我嘗試將“位置”更改為絕對並添加等於 0 的“底部”屬性但沒有成功。
如何使左側導航欄在滾動后拉伸到頁面底部時粘在頂部導航欄上？
提前感謝您的回答！
編輯：我在左側添加了內容，如果您將 window 最小化並向下滾動以查看文本，則問題很明顯
* { margin: 0; padding: 0; font-family: sans-serif; } html { min-height: 100%; } body { background-color: rgb(225, 225, 225); } #header { position: relative; background-color: white; text-align: center; border-color: rgb(93, 87, 87, 0.5); color: rgb(93, 87, 87); border-bottom-style: solid; border-width: 1px; } p { margin-top: 0; padding: 5px; font-size: 48px; } #navbar { position: relative; font-weight: bold; color: rgb(93, 87, 87); padding: 5px; align-items: center; background-color: white; display: flex; align-items: center; justify-content: space-around; } #navbar li { width: 160px; font-size: 24px; text-align: center; text-decoration: none; list-style: none; } #second__navbar { width: 25%; height: 100%; position: fixed; background-color: white; text-decoration: none; list-style: none; } #second__navbar li{ display: block; font-size: 20px; margin: 15% 0 0 15%; }
<body> <div id="header"> <p>My Name</p> </div> <div > <ul id="navbar"> <li>TITLE</li> <li>TITLE</li> <li>TITLE</li> <li>TITLE</li> </ul> </div> <div> <ul id="second__navbar"> <li>SUBTITLE</li> <li>SUBTITLE</li> <li>SUBTITLE</li> <li>SUBTITLE</li> </ul> </div> <div style="padding-left:50%; margin: 20% 20% 20% 20%"> 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> </body>
1 個解決方案
解決方案1
1 已采納 2020-08-21 21:51:07
我使用了display: flex並重新排列了一些容器 div 來獲得你正在尋找的東西（我認為。）。 查看Flexbox 的完整指南以了解如何使用 flex。 通常，我使用 flex 來排列容器元素，但不要將 flex 用於頁面的較小元素，例如文本段落。 我還需要將height: 100%添加到html 。 對您的瀏覽器開發人員工具非常友好，以查看哪些元素沒有按照您期望的方式排列。
html { height: 100%; } body { margin: 0; background-color: rgb(225, 225, 225); display: flex; flex-direction: column; min-height: 100%; } #header { position: relative; background-color: white; text-align: center; border-color: rgb(93, 87, 87, 0.5); color: rgb(93, 87, 87); border-bottom-style: solid; border-width: 1px; } p { margin-top: 0; padding: 5px; font-size: 48px; } #navbar { margin: 0; position: relative; font-weight: bold; color: rgb(93, 87, 87); padding: 5px; align-items: center; background-color: white; display: flex; align-items: center; justify-content: space-around; } #navbar li { width: 160px; font-size: 24px; text-align: center; text-decoration: none; list-style: none; }.content-wrap { flex: 1; display: flex; flex-direction: row; } #second__navbar { background-color: white; text-decoration: none; list-style: none; padding: 0; margin: 0; } #second__navbar li { display: block; font-size: 20px; margin: 10px 0; }.content { margin: 1em; }
<.DOCTYPE html> <html> <body> <div id="header"> My Name </div> <div> <ul id="navbar"> <li>TITLE</li> <li>TITLE</li> <li>TITLE</li> <li>TITLE</li> </ul> </div> <div class="content-wrap"> <ul id="second__navbar"> <li>SUBTITLE</li> <li>SUBTITLE</li> <li>SUBTITLE</li> <li>SUBTITLE</li> </ul> <div class="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. </div> </div> </body> </html>
選中復選框后滾動時如何在頁面底部粘貼div
[英]How to stick a div at the bottom of the page while scrolling after checkbox is checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.