粘滯頁腳與側邊欄無法正常工作
[英]Sticky footer not working correctly with sidebar
問題描述
我想要一個CSS側邊欄和一個粘性頁腳。 當側邊欄滑出時，頁面的其余部分應縮小以適應較小的空間。
我的問題是，當我打開菜單時，粘性頁腳將滑向側邊病房。 但它也需要縮小，但事實並非如此。 它應該像其他內容一樣水平放在頁面上，但事實並非如此。 這導致了我不想要的水平滾動條。
我該如何縮小頁腳？
html, body { height: 100%; margin: 0; padding: 0; } footer { bottom: 0; margin-left: inherit; height: 100px; left: 0; width: 100%; position: absolute; background-color: lightgrey; } ul { margin-left: 0; padding-left: 0; } .footer-img { margin-top: 15px; margin-bottom: 15px; display: inline-block; } .page-wrap { box-sizing: border-box; min-height: 100%; position: relative; transition-duration: 0.4s; } .page-content { box-sizing: border-box; min-height: 100%; padding: 0 0 100px 0; transition-duration: 0.4s; } .sidebar { position: fixed; top: 0; left: -180px; right: 0; bottom: 0; width: 120px; padding: 30px; background-color: black; z-index: 0; transition-duration: 0.4s; } .sidebar li { color: white; font-size: 18px; margin-bottom: 15px; } .toggle { position: fixed; top: 20px; left: 20px; z-index: 1; color: white; transition-duration: 0.4s; } #sidebartoggler { display: none; } #sidebartoggler:checked + .page-wrap .sidebar { left: 0; } #sidebartoggler:checked + .page-wrap .toggle { left: 200px; } #sidebartoggler:checked + .page-wrap .page-content { margin-left: 180px; }
<!doctype html> <html lang="en"> <body> <input type="checkbox" id="sidebartoggler" name="" value=""> <div class="page-wrap"> <div class="page-content"> <label for="sidebartoggler">MENU</label> <p>Lorizzle ipsizzle dolor i'm in the shizzle amizzle, away adipiscing elit. Owned sapizzle velizzle, hizzle volutpat, suscipit quizzle, gravida vel, go to hizzle. We gonna chung check it out tortor. Sed bow wow wow. Dang sure dolizzle dapibizzle turpizzle tempizzle fo shizzle. pellentesque break yo neck, yall et turpizzle. Fizzle izzle tortor. Pellentesque nizzle rhoncizzle crazy. In yippiyo crackalackin bling bling dictumst. Bizzle dapibizzle. Curabitur da bomb urna, pretizzle shizzlin dizzle, gangsta ac, eleifend vitae, nunc. Funky fresh suscipizzle. Integer semper fo shizzle uhuh ... yih! get down get down. Etizzle get down get down get down get down fo shizzle nisl. Own yo' quizzle dope. Shiz check out this, ipsizzle i'm in the shizzle malesuada scelerisque, nulla shiznit euismod felis, izzle break yo neck, yall metizzle nulla izzle mah nizzle. Vivamus ullamcorper, tortor et rizzle tellivizzle, nibh ass ultricizzle dawg, izzle luctus check it out elit izzle pimpin'. Maurizzle bow wow wow, orci mammasay mammasa mamma oo sa volutpizzle ass, gizzle shit we gonna chung fizzle, at bibendizzle enizzle that's the shizzle funky fresh nisl. Nullizzle fizzle velizzle pizzle orci uhuh ... yih!</p> <footer>Yeah, footer!</footer> </div> <div class="sidebar"> <ul> <li>home</li> <li>projects</li> <li>cool</li> </ul> </div> </div> </body> </html>
2 個解決方案
解決方案1
5 已采納 2016-12-20 14:53:03
您可以從footer刪除width並right: 0添加right: 0 。
footer {
bottom: 0;
margin-left: inherit;
height: 100px;
left: 0;
position: absolute;
background-color: lightgrey;
right: 0;
}
解決方案2
0 2016-12-20 14:57:55
您應該刪除頁腳的width屬性，並添加right: 0 。 另外，為了擁有粘性頁腳，您需要position: fixed而不是absolute 。
html, body { height: 100%; margin: 0; padding: 0; } footer { bottom: 0; margin-left: inherit; height: 100px; left: 0; right: 0; position: fixed; background-color: lightgrey; } ul { margin-left: 0; padding-left: 0; } .footer-img { margin-top: 15px; margin-bottom: 15px; display: inline-block; } .page-wrap { box-sizing: border-box; min-height: 100%; position: relative; transition-duration: 0.4s; } .page-content { box-sizing: border-box; min-height: 100%; padding: 0 0 100px 0; transition-duration: 0.4s; } .sidebar { position: fixed; top: 0; left: -180px; right: 0; bottom: 0; width: 120px; padding: 30px; background-color: black; z-index: 0; transition-duration: 0.4s; } .sidebar li { color: white; font-size: 18px; margin-bottom: 15px; } .toggle { position: fixed; top: 20px; left: 20px; z-index: 1; color: white; transition-duration: 0.4s; } #sidebartoggler { display: none; } #sidebartoggler:checked + .page-wrap .sidebar { left: 0; } #sidebartoggler:checked + .page-wrap .toggle { left: 200px; } #sidebartoggler:checked + .page-wrap .page-content { margin-left: 180px; }
<!doctype html> <html lang="en"> <body> <input type="checkbox" id="sidebartoggler" name="" value=""> <div class="page-wrap"> <div class="page-content"> <label for="sidebartoggler">MENU</label> <p>Lorizzle ipsizzle dolor i'm in the shizzle amizzle, away adipiscing elit. Owned sapizzle velizzle, hizzle volutpat, suscipit quizzle, gravida vel, go to hizzle. We gonna chung check it out tortor. Sed bow wow wow. Dang sure dolizzle dapibizzle turpizzle tempizzle fo shizzle. pellentesque break yo neck, yall et turpizzle. Fizzle izzle tortor. Pellentesque nizzle rhoncizzle crazy. In yippiyo crackalackin bling bling dictumst. Bizzle dapibizzle. Curabitur da bomb urna, pretizzle shizzlin dizzle, gangsta ac, eleifend vitae, nunc. Funky fresh suscipizzle. Integer semper fo shizzle uhuh ... yih! get down get down. Etizzle get down get down get down get down fo shizzle nisl. Own yo' quizzle dope. Shiz check out this, ipsizzle i'm in the shizzle malesuada scelerisque, nulla shiznit euismod felis, izzle break yo neck, yall metizzle nulla izzle mah nizzle. Vivamus ullamcorper, tortor et rizzle tellivizzle, nibh ass ultricizzle dawg, izzle luctus check it out elit izzle pimpin'. Maurizzle bow wow wow, orci mammasay mammasa mamma oo sa volutpizzle ass, gizzle shit we gonna chung fizzle, at bibendizzle enizzle that's the shizzle funky fresh nisl. Nullizzle fizzle velizzle pizzle orci uhuh ... yih!</p> <footer>Lorizzle ipsizzle dolor i'm in the shizzle amizzle, away adipiscing elit. Owned sapizzle velizzle, hizzle volutpat, suscipit quizzle, gravida vel, go to hizzle. We gonna chung check it out tortor. Sed bow wow wow. Dang sure dolizzle dapibizzle turpizzle tempizzle fo shizzle. pellentesque break yo neck, yall et turpizzle. Fizzle izzle tortor. Pellentesque nizzle rhoncizzle crazy. In yippiyo crackalackin bling bling dictumst. Bizzle dapibizzle. Curabitur da bomb urna, pretizzle shizzlin dizzle, gangsta ac, eleifend vitae, nunc. Funky fresh suscipizzle. Integer semper fo shizzle uhuh ... yih! get </footer> </div> <div class="sidebar"> <ul> <li>home</li> <li>projects</li> <li>cool</li> </ul> </div> </div> </body> </html>
粘性側邊欄和頁腳不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.