100% height div
Ich habe eine #main
div, ich würde gerne die gesamte Seite ausgefüllt wird zwischen dem header und dem footer, wenn es keine Inhalte. Wenn es content ist, sollte es drücken Sie den sticky footer nach unten, was es tut.
CSS:
#main {
background: transparent url("images/main-content.png") top right repeat-y;
clear: both;
overflow: hidden;
margin-top: -10px;
height: 100%;
min-height: 100%;
}
Ich bin mir nicht sicher, warum dies nicht funktioniert. #main
erbt von #wrapper
und body
, so würde ich denken, die Einrichtung zu 100% height und min-height von 100% arbeiten würde.
Website:
http://www.dentistrywithsmiles.com
Vielen Dank im Voraus für Ihre Hilfe bei diesem.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist es, dass
height: auto !important;
irgendwo in der Nähe von Zeile146
Ihrer CSS-Datei.Es ist das überschreiben der 100% Höhe des wrapper, die es nicht lassen Sie Ihre Haupt-div wachsen. Da dein footer hat eine Konstante Höhe, würde ich versuchen, hinzufügen Polsterung an den wrapper, um den main-content div nicht Essen in der Fußzeile, das ist, was passiert, wenn du dich von der
height: auto !important;
.#wrapper
es nur schiebt mein footer nach unten, und ich möchte es bleiben klebrig.div
ist, dass Sie eine Höhe, die füllt sich die Seite und lässt nicht zu, dass die Fußzeile crawl über die Seite, Höhe, warum sich mit einem sticky footer? Sie könnten nur geben Sie eine minimale Höhe für das div und Sie würde eingestellt werden, wie es schon drückt, dass Fußzeilediv
nach unten. einfach nur zu denken...div
erfüllt die Fußzeile, egal welche Bildschirmauflösung und browser. Es ist eine Art wichtige an den client.Hinzufügen
display:inline-block
zu#main
(oder zu#wrapper
je nachdem, was Sie tun wollen). Elemente mitdisplay:block
(z.B. ein div-oder p-tag standardmäßig) haben 100% Breite und Höhe, passt zum Inhalt.