Antworten auf deine Fragen:
Neues Thema erstellen

Sticky Footer verlängert Content

Jormungand

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

FrankenSchweizer

Hallo Jormungand

Und wenn Du versuchst, dem Footer

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

zu geben?
Gruß, Doli
 

Jormungand

VonAllemEtwas

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.640
Beiträge
1.538.505
Mitglieder
67.559
Neuestes Mitglied
mic4mac
Oben