Besuche unseren Sponsor
Bad Dream - Entertainment & Service

CSS – Scrollender Footer am unteren Ende einer Sidebar

Es gibt viele Beispiele dafür, wie man einen Footer „sticky“ positioniert. Etwas schwieriger wird die Positionierung innerhalb einer scrollbaren Sidebar. Dazu mehr nach dem Klick.

Die Beispiele und Tutorials über die Positionierung eines Footers sind zahlreich. Meist wird dort der Footer auf positionfixed gesetzt oder position: absolute; bottom: 0;, wie beim Bootstrap Example:


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

Benötigt man den Footer nun innerhalb eines absolut positionierten Sidebar-Divs, kommt man um einen zusätzlichen Wrapper-Div nicht herum.


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

Und das Ergebnis: https://jsfiddle.net/gcy3Lb9e/7/

Add a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.