Question

我想要一个CSS侧边栏和一个粘性页脚。当侧边栏滑出时，页面的其余部分应缩小以适应较小的空间。

我的问题是，当我打开菜单时，粘性页脚会滑动侧边病房。但它也需要缩小，但它并没有。它应该像其他内容一样水平放在页面上，但事实并非如此。这会产生一个我不想要的水平滚动条。

我应该如何缩小页脚？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您可以从width移除footer并添加right: 0。

footer {
    bottom: 0;
    margin-left: inherit;
    height: 100px;
    left: 0;
    position: absolute;
    background-color: lightgrey;
    right: 0;
}

Answer 2

您应该删除页脚的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>

粘滞页脚与侧边栏无法正常工作

2 个答案: