CSS – Scrollender Footer am unteren Ende einer Sidebar

<!-- Begin page content -->
<div class="container">
 <div class="page-header">
 <h1>Sticky footer</h1>
 </div>
 <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
 <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>

<footer class="footer">
 <div class="container">
 <p class="text-muted">Place sticky footer content here.</p>
 </div>
</footer>

</pre>
<pre>html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}</pre>
<pre>

<div class="container">
  <div class="sidebar">
    <div class="sidebar-wrapper">
      <div class="sidebar-content">
        <ul>
          <li>First</li>
          <li>Link</li>
          <li>Link</li>
          <li>....</li>
          <li>Last</li>
        </ul>
      </div>
      <div class="sidebar-footer">
        Footer
      </div>
    </div>
  </div>
  <div class="content">
    <div>Content</div>
  </div>
</div><!-- /.container -->

.sidebar {
position: absolute;
overflow: hidden;
overflow-y: auto;
background-color: #F5F5F5;
border-right: 1px solid #ccc;
height: 100%;
width: 200px;
left: 0;
bottom: 0;
}

.sidebar .sidebar-wrapper {
min-height: 100%;
position: relative;
}

.sidebar .sidebar-content {
background-color: #F5F5F5;
padding-bottom: 50px; /* height of the footer */
}

.sidebar ul {
background-color: #F5F5F5;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar .sidebar-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* height of the footer */
background-color: #eeeeee;
border-top: 1px solid #ccc;
text-align: center;
}

.content {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin-left: 40px;
}