7
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>
おかげで、働いていました。私は数分でそれを受け入れます。 –
私はそれがうまく働いた。 Saurav Rastogiありがとうございました。私は休憩していましたので、正しく更新する時間がありませんでした。 – Armin