Antworten:
Der Trick dabei ist die Angabe von 100% Höhe für die HTML- und Body-Elemente. Einige Browser suchen nach den übergeordneten Elementen (HTML, Body), um die Höhe zu berechnen.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Vergiss alle Antworten, diese CSS-Zeile hat in 2 Sekunden für mich funktioniert:
height:100vh;1vh = 1% der Bildschirmhöhe des Browsers
Für eine reaktionsschnelle Layoutskalierung möchten Sie möglicherweise Folgendes verwenden:
min-height: 100vh[Update November 2018] Wie in den Kommentaren erwähnt, können durch die Verwendung der Mindesthöhe Probleme mit reaktionsschnellen Designs vermieden werden
[Update April 2018] Wie in den Kommentaren erwähnt, unterstützten 2011, als die Frage gestellt wurde, nicht alle Browser die Ansichtsfenstereinheiten. Die anderen Antworten waren die Lösungen damals - werden vmaxim IE immer noch nicht unterstützt, daher ist dies möglicherweise noch nicht die beste Lösung für alle.
min-height: 100vha viel besser wäre. Es würde sich auch für reaktionsschnelle Designs skalieren lassen.
Eigentlich ist der beste Ansatz folgender:
html {
height:100%;
}
body {
min-height:100%;
}
Dies löst alles für mich und hilft mir, meine Fußzeile zu steuern, und es kann die feste Fußzeile haben, egal ob die Seite nach unten gescrollt wird.
Technische Lösung - BEARBEITET
Historisch gesehen ist es schwierig, mit "Höhe" zu formen, verglichen mit "Breite" am einfachsten. Da konzentriert sich CSS darauf, <body>dass das Styling funktioniert. Den Code oben - wir gaben <html>und <body>eine Höhe. Hier kommt Magie ins Spiel - da wir auf dem Spieltisch eine Mindesthöhe haben, sagen wir dem Browser, dass er <body>überlegen ist, <html>weil er <body>die Mindesthöhe hält. Dies ermöglicht wiederum <body>das Überschreiben, <html>da <html>die Höhe bereits früher war. Mit anderen Worten, wir betrügen den Browser, <html>um vom Tisch zu "stoßen" , damit wir unabhängig stylen können.
min-heightund height?
<body>dass das Styling funktioniert. Dieser Code: Wir gaben <html>und <body>eine Höhe. Hier kommt Magie ins Spiel - da wir auf dem Spieltisch eine Mindesthöhe haben, sagen wir dem Server, dass er <body>überlegen ist, <html>weil er <body>die Mindesthöhe hält. Dies ermöglicht wiederum <body>das Überschreiben, <html>da <html>die Höhe bereits früher war. Mit anderen Worten, wir betrügen den Server, <html>um vom Tisch zu "stoßen" , damit wir unabhängig stylen können.
Sie können vh für die Eigenschaft min-height verwenden.
min-height: 100vh;Sie können wie folgt vorgehen, je nachdem, wie Sie die Ränder verwenden ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementDie akzeptierte Lösung funktioniert tatsächlich nicht. Sie werden feststellen, dass der Inhalt divder Höhe des übergeordneten Inhalts entspricht body. Wenn Sie also die bodyHöhe auf 100%einstellen, wird sie gleich der Höhe des Browserfensters eingestellt. Lassen Sie uns sagen , dass das Browser - Fenster war 768pxin der Höhe, durch den Inhalt Einstellung divder Höhe 100%, die divin ‚s Höhe ausfallen wird 768px. Auf diese Weise erhalten Sie das Header-Div-Wesen 150pxund das Content-Div-Wesen 768px. Am Ende haben Sie Inhalte 150pxunter dem Ende der Seite. Eine andere Lösung finden Sie unter diesem Link.
Mit HTML5 können Sie dies tun:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
Für mich hat der nächste gut funktioniert:
Ich habe den Header und den Inhalt in ein Div eingewickelt
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
Ich habe diese Referenz verwendet , um die Höhe mit Flexbox zu füllen. Das CSS sieht folgendermaßen aus:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
Weitere Informationen zur Flexbox-Technik finden Sie in der Referenz
Sie können das übergeordnete Element auch auf festlegen display: inline. Siehe http://codepen.io/tommymarshall/pen/cECyH
Stellen Sie sicher, dass auch die Höhe von HTML und Body auf 100% eingestellt ist.
Die akzeptierte Antwort funktioniert nicht. Und die Antwort mit der höchsten Stimme beantwortet nicht die eigentliche Frage. Mit einem Header mit fester Pixelhöhe und einem Füllelement in der verbleibenden Anzeige des Browsers und scrollen Sie für oowerflow. Hier ist eine Lösung, die tatsächlich funktioniert und die absolute Positionierung verwendet. Ich gehe auch davon aus, dass die Höhe des Headers durch den Klang des "festen Headers" in der Frage bekannt ist. Ich verwende hier 150px als Beispiel:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS: (Hinzufügen der Hintergrundfarbe nur für visuelle Effekte)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
Um einen detaillierteren Blick darauf zu werfen, wie dies funktioniert, #Contentschauen Sie sich diese jsfiddle mit Bootstrap-Zeilen und -Spalten an.
bottomEigenschaft hat dafür gesorgt, dass die #Contentam Ende der Seite stecken bleiben. Ich weiß es zu schätzen, dass Sie sich die Zeit genommen haben, es zu erklären.
In diesem Fall möchte ich, dass mein Hauptinhaltsbereich flüssig ist, damit die gesamte Seite 100% der Browserhöhe einnimmt.
height: 100vh;
Bitte lassen Sie mich hier meine 5 Cent hinzufügen und eine klassische Lösung anbieten:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Dies funktioniert in allen Browsern, kein Skript, kein Flex. Öffnen Sie das Snippet im Ganzseitenmodus und ändern Sie die Größe des Browsers: Die gewünschten Proportionen bleiben auch im Vollbildmodus erhalten.
idHeader.heightund idContent.topwerden so angepasst, dass sie den Rand einschließen, und sollten denselben Wert haben, wenn der Rand nicht verwendet wird. Andernfalls werden Elemente aus dem Ansichtsfenster entfernt, da die berechnete Breite keine Rahmen, Ränder und / oder Auffüllungen enthält.left:0; right:0;kann width:100%aus dem gleichen Grund ersetzt werden, wenn kein Rand verwendet wird.padding-topund / oder
padding-bottomAttribute hinzufügen #idOuter.Um meine Antwort zu vervollständigen, hier ist das Fußzeilenlayout:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Und hier ist das Layout mit Kopf- und Fußzeile:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Sofern Sie IE 9 und niedriger nicht unterstützen müssen, würde ich Flexbox verwenden
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }Sie müssen auch Körper bekommen, um die ganze Seite zu füllen
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS PLaY | browserübergreifendes festes Kopf- / Fußzeilen- / zentriertes einspaltiges Layout
CSS-Frames, Version 2: Beispiel 2, angegebene Breite | 456 Berea Street
Eine wichtige Sache ist, dass, obwohl dies einfach klingt, eine Menge hässlicher Code in Ihre CSS-Datei eingehen wird, um einen solchen Effekt zu erzielen. Leider ist es wirklich die einzige Option.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}Die beste Lösung, die ich bisher gefunden habe, besteht darin, ein Fußzeilenelement am unteren Rand der Seite festzulegen und dann den Unterschied zwischen dem Versatz der Fußzeile und dem Element, das wir erweitern müssen, auszuwerten. z.B
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Möglicherweise möchten Sie auch die Höhe des Inhaltselements in jeder Fenstergröße aktualisieren, also ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Haben Sie so etwas versucht?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>