CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ben K.
Ben K.

Reputation: 33

Sticky footer on fixed position sidebar, want css solution

I used the technique of sticky footer provided by Martin Bean and Ryan Fait for a while, works fine until I find myself needs to put a sticky footer on a fixed position sidebar.

Since fixed position sidebar is invisible to the document, the setting of margin and padding in the wrapper has no effect. I tried to add another inner-wrapper inside the sidebar but also not helping. I would like to know if there's any pure CSS solution for this request?

The reason I have to use fixed positioning sidebar is I use transitioning effect to collapse it when screen size is small. The method is learned from StartBootstrap, example simple-sidebar.

BTW: I'm using BS3

The basic set up of my site is:

HTML

<div id="wrap">   
  <div id="sidebar-wrapper">
    <div id="inner-wrap">
      <ul id="sidebar-nav">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div id="footer">
      Copyright claim
    </div>  
  </div>
  <div id="main-wrapper">
    Some Content
  </div>
</div>

CSS

html, body {
  height: 100%;
}

#wrap {
    height: 100%;
}

#sidebar-wrapper {
  width: 250px;
  position: fixed;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding: 0 auto 50px;
  margin: 0 auto -50px;
}

#inner-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
  padding: 0 auto 50px;
  width: 100%; 
}

#sidebar-nav {
  position: relative;
  top: 0px;
  width: 250px;
  margin: 0px;
  padding: 0px;
}

#footer {
  height: 50px;
  position: absolute;
  width: 250px;
}

I made a temp bootply. Hope it helps.

UPDATE The problem is solved by Bass. Thanks a lot! The cause of the above code not working is due to the extra 'height: auto !important;' set in the parent #sidebar-wrapper. Delete it then everything works fine. If you like, you can also delete the position:absolute in #footer as well.

Upvotes: 3

Views: 8327

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

I seems to me you can do the same with an extra wrapper on your sidebar:

html

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
   <div id="sidebar-wrapper-wrapper">     
    <ul class="sidebar-nav">
      <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Shortcuts</a></li>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div style="background-color:red;height:60px">footer</div>  

  </div>

css

#sidebar-wrapper-wrapper {
    height: auto !important;
    margin: 0 auto -60px;
    min-height: 100%;
    padding: 0 0 60px;
}

Upvotes: 0

Related Questions