CODEWITHSUNDEEP
htmlcsscss-selectors
Tristan
Tristan

Reputation: 2088

Sticky footer not working correctly with sidebar

I wanted to have a CSS sidebar and a sticky footer. When the sidebar slides out, the rest of the page should shrink to fit the smaller space.

My problem is that when I open the menu, the sticky footer will slide side wards. But it also needs to shrink, which it doesn't. It should fit on the page horizontally like the rest of the content but it does not. That results in a horizontal scrollbar that I don't want to have.

How should I make footer shrink?

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>

Upvotes: 7

Views: 1110

Answers (2)

Armin
Armin

Reputation: 1178

You can remove width from footer and add right: 0.

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

Upvotes: 6

Alic
Alic

Reputation: 648

You should remove the width property of footer, and add right: 0. Also in order to have a sticky footer, you need position: fixed instead of 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>

Upvotes: 0

Related Questions