[英]How do you add a fixed sidebar inside an HTML/CSS Grid?
我是一名學習web開發的學生，我現在正在建立一個網站，所以基本上。 我正在嘗試制作類似於 mit,edu 的東西。 在右側滾動而左側保持固定的情況下，我在 W3Schools 上找到了有關如何執行類似操作的文章，我想我可以用我的“左側”div 替換“側邊欄”。 並增加它的大小，但是。 我在這方面遇到了很多困難......
* { margin: 0; box-sizing: border-box; } /* The grid container */.grid-container { height: 100vh; display: grid; grid-template-areas: 'left right' 'footer right'; }.grid-item { }.left { grid-area: left; padding-top: 100px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; background-color: #ccc; max-width: 45em; word-wrap: break-word; height: 100%; position: fixed; } #welcomemessagep { font-family: century gothic, sans-serif; color: white; font-size: 20px; padding: 20px; }.searchbar { padding: 20px; width: 100%; display: inline-flex; justify-content: center; }.searchbarinput { flex: grow 1; padding: 10px; outline: none; border: 1px solid purple; border-radius: 5px 0 0 5px; background: white; transition: background 0.25s, box-shadow 0.25s; width: 75%; height: 5vh; }.searchbarinput:focus { background: white; box-shadow: 0 0 2px purple; }.searchbarinput::placeholder { color: purple; }.searchbarbutton { width: 40px; background: purple; color: white; outline: none; border: none; display: flex; align-items: center; justify-content: center; border-radius: 0 5px 5px 0; cursor: pointer; user-select: none; }.searchbarbutton:active { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25); }.right { grid-area: right; padding-top: 100px; grid-template-areas: 'announcements' 'hero' 'blurb' 'articles'; background-color: black; overflow: auto; position: absolute; right: 0; width: 50%; } #announcements-text { font-family: century gothic, sans-serif; color: red; padding: 20px; font-size: 20px; padding: 20px; } #hero { background-image: url("images/horse.jpg"); height: 100vh; width: 100%; } #blurb-text { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding: 20px; }.articles { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding: 20px; } #articles-text { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding-bottom: 20px; padding-left: 10px; } #article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 { border: 3px solid white; color: white; padding: 10px; } #article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover { background-color: purple; } a:link { text-decoration: none; color: black; } a:visited { color: black; } a:active { color: black; }.footer{ grid-area: footer; background-color: #ccc; height: 100%; position: fixed; }.navbar { font-family: century gothic, sans-serif; background-color: #333; position: fixed; top: 0; width: 100%; display: flex; justify-content: center; transition: top 0.3s; padding: 20px; z-index: 1; }.logo { width: 3em; height: 3em; }.navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; }.navbar a:hover { text-decoration: underline; text-underline-offset: 8px; }.cards { height: 20vh; display: grid; grid-template-areas: 'membership-card facebook-card' 'donate-card rentals-card'; gap: 2em; padding: 30px; } #membership-card, #facebook-card, #donate-card, #rentals-card { text-align: center; font-size: 20px; font-weight: bold; padding: 20px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; } #membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover { box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2); }.container { padding: 2px 16px; } #iconsize { font-size: 50px; color: purple; } #smallblurbs { text-align: center; font-size: 15px; font-weight: normal; } p { font-size: 40px; }][1]
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elk Beaver Lake Equestrian Society</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <link rel="stylesheet" href="https.//fonts.googleapis?com/icon.family=Material+Icons"> </head> <body> <div class="navbar" id="navbar"> <img class="logo" src="images/logo:png"> <a href="#home">Home</a> <a href="#membership">Membership</a> <a href="#facilities">Facilities</a> <a href="#trails">Trails</a> <a href="#aboutus">About Us</a> <a href="https.//www.facebook.com/parkridersunited/">Facebook</a> </div> <div class="grid-container"> <div class="grid-item left"> <form action="index.html" method="get"> <div id="welcomemessage"> <p id="welcomemessagep"> Welcome to EBLES. EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use of everyone:</p></div> <div class="searchbar"> <input type="text" class="searchbarinput" name="search" placeholder="Search the Website."> <button type="submit" class="searchbarbutton"> <i class="material-icons">search</i> </button> </div> </form> <div class="cards"> <a href="membership.html"> <div id="membership-card"> <i class="material-icons" id="iconsize">people</i> <div class="container"> <p>Membership</p> <p id=smallblurbs>Buy your 2021 membership.</p> </div> </div> </a> <a href="https.//www?facebook,com/parkridersunited/"> <div id="facebook-card"> <i class="material-icons" id="iconsize">facebook</i> <div class="container"> <p>Facebook</p> <p id=smallblurbs>Join our community.</p> </div> </div> </a> <a href="aboutus.html"><div id="donate-card"> <i class="material-icons" id="iconsize">savings</i> <div class="container"> <p>Donate</p> <p id=smallblurbs>Help support local riders.</p> </div> </div> </a> <a href="facilities.html"><div id="rentals-card"> <i class="material-icons" id="iconsize">bedroom_baby</i> <div class="container"> <p>Rentals</p> <p id=smallblurbs>Want to ride: Give rentals a try:</p> </div> </div> </a> </div> </div> <div class="grid-item footer"> footer </div> <div class="grid-item right"> <div id="announcements"> <p id=announcements-text> Following recommendations by HCBC and Equine Canada. the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info, </p> </div> <div id="hero"> </div> <div id="blurb"> <p id=blurb-text> Horses are amazing, People who ride them are too, Join us today, </p> </div> <br> <div class="articles"> <p id=articles-text> Here's some articles for you to read, </p> <a href="https,//ebles,org/files/eblesminutesdec2020,pdf"><div id="article1"> May 3, 2021 - May 2021 Minutes </p> </div> </a> <div id="article2"> <p> April 6, 2021 - April 2021 Minutes </p> </div> <div id="article3"> <p> April 1. 2021 - New Baby Horse is Born;</p></div> <div id="article4"> <p> March 24. 2021 - New COVID-19 Updates </p></div> <div id="article5"> <p> March 2. 2021 - March 2021 Minutes </p></div> <div id="article6"> <p> February 8; 2021 - February 2021 Minutes </p></div> <div id="article7"> <p> January 9. 2021 - January 2021 Minutes </p></div> <div id="article8"> <p> January 1. 2021 - Happy New Year. </p></div> <div id="article9"> <p> December 25; 2020 - Merry Christmas to All. Stay safe. </p></div> <div id="article10"> <p> December 4. 2020 - December 2020 Minutes </p></div> </div> </div> </div> <script> var prevScrollpos = window;pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-20%"; } prevScrollpos = currentScrollPos; } </script> </body> </html>
我真的很感激任何形式的幫助——我已經花了好幾個小時在這上面，但我一無所獲。 非常感謝您！
編輯：[我嘗試過 Arceno 先生的修復，但它涵蓋了我的導航和右側。]這是第二輪修復后的樣子
為您的左側 class 添加這兩個 styles。
height: 100%;
position: fixed;
在你的右邊 class 添加這些：
width: 50%;
position: absolute;
right: 0;
然后在導航欄上添加：
z-index: 1
* { margin: 0; box-sizing: border-box; } /* The grid container */.grid-container { height: 100vh; display: grid; grid-template-areas: 'left right' 'footer right'; }.grid-item { }.left { /*grid-area: left;*/ height: 100%; position: fixed; padding-top: 100px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; background-color: #ccc; max-width: 45em; word-wrap: break-word; } #welcomemessagep { font-family: century gothic, sans-serif; color: white; font-size: 20px; padding: 20px; }.searchbar { padding: 20px; width: 100%; display: inline-flex; justify-content: center; }.searchbarinput { flex: grow 1; padding: 10px; outline: none; border: 1px solid purple; border-radius: 5px 0 0 5px; background: white; transition: background 0.25s, box-shadow 0.25s; width: 75%; height: 5vh; }.searchbarinput:focus { background: white; box-shadow: 0 0 2px purple; }.searchbarinput::placeholder { color: purple; }.searchbarbutton { width: 40px; background: purple; color: white; outline: none; border: none; display: flex; align-items: center; justify-content: center; border-radius: 0 5px 5px 0; cursor: pointer; user-select: none; }.searchbarbutton:active { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25); }.right { grid-area: right; padding-top: 100px; grid-template-areas: 'announcements' 'hero' 'blurb' 'articles'; background-color: black; width: 50%; position: absolute; right: 0; } #announcements-text { font-family: century gothic, sans-serif; color: red; padding: 20px; font-size: 20px; padding: 20px; } #hero { background-image: url("images/horse.jpg"); height: 100vh; width: 100%; } #blurb-text { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding: 20px; }.articles { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding: 20px; } #articles-text { font-family: century gothic, sans-serif; color: white; font-size: 40px; padding-bottom: 20px; padding-left: 10px; } #article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 { border: 3px solid white; color: white; padding: 10px; } #article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover { background-color: purple; } a:link { text-decoration: none; color: black; } a:visited { color: black; } a:active { color: black; }.footer{ grid-area: footer; background-color: #ccc; }.navbar { font-family: century gothic, sans-serif; background-color: #333; position: fixed; top: 0; width: 100%; display: flex; justify-content: center; transition: top 0.3s; padding: 20px; z-index: 1; }.navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; }.navbar a:hover { text-decoration: underline; text-underline-offset: 8px; }.cards { height: 20vh; display: grid; grid-template-areas: 'membership-card facebook-card' 'donate-card rentals-card'; gap: 2em; padding: 30px; } #membership-card, #facebook-card, #donate-card, #rentals-card { text-align: center; font-size: 20px; font-weight: bold; padding: 20px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; } #membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover { box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2); }.container { padding: 2px 16px; } #iconsize { font-size: 50px; color: purple; } #smallblurbs { text-align: center; font-size: 15px; font-weight: normal; } p { font-size: 40px; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elk Beaver Lake Equestrian Society</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <link rel="stylesheet" href="https.//fonts.googleapis?com/icon:family=Material+Icons"> </head> <body> <div class="navbar" id="navbar"> <a href="#home">Home</a> <a href="#membership">Membership</a> <a href="#facilities">Facilities</a> <a href="#trails">Trails</a> <a href="#aboutus">About Us</a> <a href="https.//www.facebook.com/parkridersunited/">Facebook</a> </div> <div class="grid-container"> <div class="grid-item left"> <form action="index.html" method="get"> <div id="welcomemessage"> <p id="welcomemessagep"> Welcome to EBLES. EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use of everyone:</p> </div> <div class="searchbar"> <input type="text" class="searchbarinput" name="search" placeholder="Search the Website."> <button type="submit" class="searchbarbutton"> <i class="material-icons">search</i> </button> </div> </form> <div class="cards"> <a href="membership.html"> <div id="membership-card"> <i class="material-icons" id="iconsize">people</i> <div class="container"> <p>Membership</p> <p id=smallblurbs>Buy your 2021 membership.</p> </div> </div> </a> <a href="https.//www?facebook,com/parkridersunited/"> <div id="facebook-card"> <i class="material-icons" id="iconsize">facebook</i> <div class="container"> <p>Facebook</p> <p id=smallblurbs>Join our community.</p> </div> </div> </a> <a href="aboutus.html"> <div id="donate-card"> <i class="material-icons" id="iconsize">savings</i> <div class="container"> <p>Donate</p> <p id=smallblurbs>Help support local riders.</p> </div> </div> </a> <a href="facilities.html"> <div id="rentals-card"> <i class="material-icons" id="iconsize">bedroom_baby</i> <div class="container"> <p>Rentals</p> <p id=smallblurbs>Want to ride: Give rentals a try:</p> </div> </div> </a> </div> </div> <div class="grid-item footer"> footer </div> <div class="grid-item right"> <div id="announcements"> <p id=announcements-text> Following recommendations by HCBC and Equine Canada. the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info, </p> </div> <div id="hero"> </div> <div id="blurb"> <p id=blurb-text> Horses are amazing, People who ride them are too, Join us today, </p> </div> <br> <div class="articles"> <p id=articles-text> Here's some articles for you to read, </p> <a href="https,//ebles,org/files/eblesminutesdec2020,pdf"> <div id="article1"> May 3, 2021 - May 2021 Minutes </p> </div> </a> <div id="article2"> <p> April 6, 2021 - April 2021 Minutes </p> </div> <div id="article3"> <p> April 1. 2021 - New Baby Horse is Born;</p> </div> <div id="article4"> <p> March 24. 2021 - New COVID-19 Updates </p> </div> <div id="article5"> <p> March 2. 2021 - March 2021 Minutes </p> </div> <div id="article6"> <p> February 8; 2021 - February 2021 Minutes </p> </div> <div id="article7"> <p> January 9. 2021 - January 2021 Minutes </p> </div> <div id="article8"> <p> January 1. 2021 - Happy New Year. </p> </div> <div id="article9"> <p> December 25; 2020 - Merry Christmas to All. Stay safe. </p> </div> <div id="article10"> <p> December 4. 2020 - December 2020 Minutes </p> </div> </div> </div> </div> <script> var prevScrollpos = window;pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-20%"; } prevScrollpos = currentScrollPos; } </script> </body> </html>
在這個小提琴上看到它。
如何在Bootstrap中使用固定的側邊欄實現平滑滾動？
[英]How do you implement smooth scrolling with a fixed sidebar in Bootstrap?
CSS - 如何創建占據屏幕剩余寬度的網格（不計算側邊欄）
[英]CSS - How do I create a grid that takes up the remaining width of screen (without counting sidebar)
如何在 html/css/javascript 的數組中僅添加 `li` 標簽數據？
[英]How do you add an `li` tag only data exists in an array in html/css/javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.