Sticky Footer verlängert Content

Jormungand · 06.02.2014

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.

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>

Ich schreibe hier nur die wichtigsten CSS Formatierungen rein, weil ich sonst auch das Bootstrap CSS einfügen müsste

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

Doli · 06.02.2014

Hallo Jormungand

Und wenn Du versuchst, dem Footer

HTML:

position:fixed;
left:0;
bottom:0;

zu geben?
Gruß, Doli

Jormungand · 06.02.2014

Hallo Doli,
hat super geklappt damit. Es musste nur noch bei #wrap noch min-height:100% raus und ein padding in Höhe des Footers vergeben werden.
Vielen Dank für die Hilfe!
Grüße
Jormungand