Footer am Fuß der Seite mit unterschiedlicher Breite Inhalt div - html, css

Ich habe Header von 100% Breite und Inhalt von 980pxund Fußzeile von 100% Breite. Aber die Fußzeile bleibt nicht am unteren Rand der Seite hängen. es hängt von Kontakt div ab. Bitte sehen Sie sich meinen untenstehenden Code an und lassen Sie mich wissen, wenn es Probleme bei der Codierung gibt.

Ich suche alle Post, aber nichts funktioniert für mich. Wenn du google.com footer siehst, ist es immer auf dem Fuß was die Bildschirmauflösung angeht.

     * {
margin: 0px;
padding: 0px;
}

body, html {
position: relative;
background-color: #fff;


height:100%;
}

.contents {
position: relative;
width: 980px;
margin: 0 auto;
background-color: red;
clear:both;
}

/* Header of the page */
.header {
height:100px;
width:100%;
background-color:#000099;
}

/* footer of the page */
.footer {
clear:both;
background:#6cf;
position:absolute;
bottom:0;
width:100%;
margin-top:5px;
height : 100px;
}

<body>
<div class="header">
here is the header
</div>

<div class="contents">
<p>Contents</p>
</div>

<div class="footer">
<p>Footer</p>
</div>

</body>

Antworten:

1 für die Antwort № 1

Lassen Sie uns von vorne anfangen. Dies ist mein Lieblings-Sticky-Footer-Rezept. Angepasst von CSS Tricks

Die Fußzeile ist unabhängig von den UmschlägenInhalt. Es wird effektiv aus dem Darstellungsbereich geschoben und dann durch den negativen Rand nach oben gezogen. Es wird auf jede Höhe skaliert, unabhängig davon, wie viel Inhalt Sie hineinlegen.

Endless Content Geige Beispiel

Grundidee Geige

HTML

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>

CSS

html, body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Helvetica;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 400px;
margin: 0 auto;
/* same height as footer */
margin-bottom: -120px;
}
#wrapper:after {
content:"";
display: block;
}
#header {
height: 200px;
background: #FF0;
}
#footer, #wrapper:after {
/* same height as wrapper negative margin */
height: 120px;
}
#footer {
background: #F00;
}

0 für die Antwort № 2

Versuche dies:

html, body {
height: 100%;
margin:0;
}
.header {
height:100px;
width:100%;
background-color:#000099;
}
.contents {
min-height: 100%;
width: 980px;
/* equal to footer height */
margin-bottom: -100px;
}
.contents:after {
content:"";
display: block;
}
.site-footer {
/* .push must be the same height as footer */
height: 100px;
width:100%;
}
.site-footer {
background:#6cf;
}

JSFidel:

http://jsfiddle.net/EyGNp/2/


0 für die Antwort № 3

Wenn du möchtest, dass deine Fußzeile immer unten istWenn der Inhalt der Seite länger ist als das Ansichtsfenster, können Sie mit calc () die Mindesthöhe des Inhalts div berechnen.

.contents {
position: relative;
width: 980px;
margin: 0 auto;
background-color: red;
clear:both;
min-height: calc(100% - 205px);
}

What this does is set the min-height of the Inhalt div zu 100% des Containers, weniger die Höhe der Kopf- und Fußzeile. Es wird daher zwingen, die Inhalte div zu wachsen, wenn weniger Inhalt als das Ansichtsfenster die Fußzeile an den unteren Rand des Bildschirms zu zwingen.

Hier ist die Geige.


Speisekarte