Wie man ein div mit css in den verbleibenden vertikalen Raum füllt
Ich versuche, ein Standardwebsite-Layout mit einer Kopfzeile , einer Navigationsleiste einer Textstelle (rechts von der Navigationsleiste ) zu erstellen ) und eine Fußzeile .
Jetzt habe ich das bisher gemacht:
%Vor%was das erzeugt:
Wenn wir jetzt das CSS überprüfen:
%Vor%Wie Sie sehen können, habe ich versucht, die height und min-height des body und nav bar so zu setzen, dass die restlichen gefüllt werden vertikaler Raum zB:
Aber es beeinflusst es nicht. Wenn ich height: 500px mache, ändert sich die Größe wie erwartet (natürlich ist dies jetzt keine sehr gute Übung, da verschiedene Bildschirmgrößen usw. einen anderen Teil oder eine andere Ansicht der Seite anzeigen würden):
Im Grunde frage ich mich, wie ich% code% in den vertikalen Raum füllen könnte, der übrig bleibt, ohne einen fest codierten Wert zu verwenden, also divs , eher würde ich es in Prozenten tun wollen, also wird die Seite es tun Sieht in allen Browsern gleich aus
3 Antworten
füge diesen Code zu deinem Körper hinzu, html:
%Vor% und mach deine Navbar <div id="navbar"> anstatt <div class="navbar">
dann addiere Höhe: 100%; zu deiner Navigationsleiste
Gleiches gilt für Ihren Inhalt nenne es so etwas wie Inhalt, weil der Körper bereits benutzt wird.
%Vor%Jetzt haben alle Divs eine Höhe von 100%, also die volle Browserhöhe.
EDIT: Ihr vollständiger Code würde so aussehen:
%Vor%Es scheint mir, dass Sie versuchen, eine CSS-Sticky-Fußzeile zu implementieren - so ist Ihre Fußzeile immer am unteren Rand und Inhalt scheint um den Rest der Seite zu füllen.
Verwenden Sie die absolute Positionierung für jeden Inhaltsblock (Kopfzeile, Fußzeile, Seitenleiste, Hauptteil), und legen Sie für die divs body und nav-bar die Eigenschaften der oberen und unteren Position fest und nicht die Eigenschaft height. Dadurch werden sie gezwungen, die verbleibende Ansichtsfensterhöhe zu füllen.
... und zur Unterstützung von IE5 und IE6 hier ist eine verbesserte Version , die nur CSS verwendet (kein Javascript) .