VonAllemEtwas
Hallo zusammen,
ich versuche einer mit Bootstrap gebastelten Seite einen Sticky Footer zu geben. Trotz der Anleitung von Bootstrap und Tips bei Github und Stackoverflow hat es nicht geklappt.
Der Footer ist zwar jetzt sticky, verlängert aber auch bei wenig Content die Contentarea so weit, dass ein Scrollbalken entsteht und man zum Footer scrollen muss.
Ich schreibe hier nur die wichtigsten CSS Formatierungen rein, weil ich sonst auch das Bootstrap CSS einfügen müsste
Hab schon versucht bei #wrap die min-height:100% rauszunehmen, aber dadurch springt der Footer wieder hoch.
Schöne Grüße
Jormungand
ich versuche einer mit Bootstrap gebastelten Seite einen Sticky Footer zu geben. Trotz der Anleitung von Bootstrap und Tips bei Github und Stackoverflow hat es nicht geklappt.
Der Footer ist zwar jetzt sticky, verlängert aber auch bei wenig Content die Contentarea so weit, dass ein Scrollbalken entsteht und man zum Footer scrollen muss.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="lang"><a href="#">deutsch</a> - <a href="#">englisch</a></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Seitenname</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Navi1</a></li>
<li><a href="#">Navi2</a></li>
<li><a href="#">Navi3</a></li>
<li><a href="#">Navi4</a></li>
<li><a href="#">Navi5</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- /HEADER -->
<div id="wrap">
<div class="container">
<div id="sidebar">
<div>Hallo, ich bin die Sidebar</div>
</div>
<div id="splitcontent"><h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
</div>
</div>
<div id="footer">
<div class="container">
<ul>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">AGBs</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
Code:
html, body {
height: 100%;
}
body {
color: #333;
font-size: 12px;
padding-bottom: 70px; /* Abstand für Footer */
background-color: #afd9ee;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -40px; /* negative Höhe des Footers */
}
#footer {
width: 100%;
height: 40px;
background-color: #FFF;
padding-top: 10px;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.15);
}
Hab schon versucht bei #wrap die min-height:100% rauszunehmen, aber dadurch springt der Footer wieder hoch.
Schöne Grüße
Jormungand