100% Mindesthöhe CSS-Layout

164

Was ist der beste Weg, um ein Element mit einer Mindesthöhe von 100% in einer Vielzahl von Browsern zu erstellen?

Insbesondere wenn Sie ein Layout mit einem headerund footervon fest haben height,

Wie füllt man den mittleren Inhaltsteil 100%des Zwischenraums mit footerdem unten angeordneten?

Chris Porter
quelle
24
Sie könnten überlegen min-height: 100vh;. Dadurch wird die Höhe gleich oder größer als die Größe des Bildschirms vh: vertical height. Für mehr: w3schools.com/cssref/css_units.asp .
Stanislav
2
Nur zur Verdeutlichung, vhsteht für viewport heightund so können Sie auch vwfür viewport widthund vminfür jede Dimension die kleinste verwenden , viewport minimum.
Iopener
1
Diese Lösung liefert unerwünschte Ergebnisse auf Chrome für Android (müsste bei anderen mobilen Browsern wie Safari überprüft werden), da 100vh nicht mit 100% identisch sind. Tatsächlich entspricht die Höhe 100% der Höhe des Bildschirms abzüglich der Adressleiste am oberen Bildschirmrand, während 100vh der Höhe des Bildschirms ohne Adressleiste entspricht. Die Verwendung von 100vh funktioniert also nicht mit Chrome für Android. Ihre Fußzeile befindet sich um eine Höhe unterhalb der Falte, die der Höhe der Adressleiste des Browsers entspricht.
Sboisse
Dies können Sie mit Flexbox erreichen. Siehe Beispiel .
Reggie Pinkham
1
Jetzt funktioniert ein Tag '100vh' wie ein Zauber
Awais

Antworten:

114

Ich verwende das folgende: CSS-Layout - 100% Höhe

Min-Höhe

Das Element #container dieser Seite hat eine Mindesthöhe von 100%. Auf diese Weise wird die Höhe von #container auch länger, wenn der Inhalt mehr Höhe erfordert als das Ansichtsfenster bereitstellt. Mögliche Spalten in #content können dann mit einem Hintergrundbild auf #container visualisiert werden. divs sind keine Tabellenzellen, und Sie benötigen (oder möchten) nicht die physischen Elemente, um einen solchen visuellen Effekt zu erzielen. Wenn Sie noch nicht überzeugt sind; Denken Sie an wackelige Linien und Verläufe anstelle von geraden Linien und einfachen Farbschemata.

Relative Positionierung

Da #container eine relative Position hat, bleibt #footer immer ganz unten. Da die oben erwähnte Mindesthöhe die Skalierung von #container nicht verhindert, funktioniert dies auch dann, wenn (oder insbesondere wenn) #content #container zwingt, länger zu werden.

Polsterung unten

Da es sich nicht mehr im normalen Ablauf befindet, bietet der Padding-Bottom von #content jetzt Platz für die absolute #Footer. Diese Auffüllung ist standardmäßig in der Bildlaufhöhe enthalten, sodass die Fußzeile den obigen Inhalt niemals überlappt.

Skalieren Sie die Textgröße ein wenig oder ändern Sie die Größe Ihres Browserfensters, um dieses Layout zu testen.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Funktioniert gut für mich.

ollifant
quelle
In diesem Beispiel wurde in IE7 versucht, die Schriftgröße (Strg + "+") und die ruinierte klebrige Fußzeile zu erhöhen :(
Vitaly
Dieser scheint in IE9 nicht zu funktionieren ... funktioniert er in anderen IEs?
William Niu
30

So legen Sie eine benutzerdefinierte Höhe fest, die an einer bestimmten Stelle festgelegt ist:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}
<div id="outerbox">
  <div id="innerbox"></div>
</div>

Chris
quelle
23

Hier ist eine andere Lösung, die auf CSS-Einheiten basiert vh, oder viewpoint heightfür Details besuchen Sie diese . Es basiert auf dieser Lösung , die stattdessen Flex verwendet.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}
<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Die Einheiten sind vw, vh, vmax, vmin. Grundsätzlich entspricht jede Einheit 1% der Größe des Ansichtsfensters. Wenn sich das Ansichtsfenster ändert, berechnet der Browser diesen Wert und passt ihn entsprechend an.

Weitere Informationen finden Sie hier:

Speziell:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest
Stanislav
quelle
6

Um min-heightmit Prozentsätzen korrekt zu arbeiten und gleichzeitig den übergeordneten Knoten zu erben min-height, besteht der Trick darin, die Höhe des übergeordneten Knotens auf festzulegen, 1pxund dann min-heightfunktioniert die Höhe des untergeordneten Knotens korrekt.

Demoseite

vsync
quelle
Gut, ABER wenn der Inhalt von div in der Demo mehr Höhe als das Browserfenster hat, wird der Hintergrund nach dem
Scrollen
@fider - Bitte geben Sie einen Spielplatz an, auf dem das von Ihnen erwähnte Problem aufgeführt ist.
vsync
jsbin.com/nixuf/1/edit nach unten scrollen. Ich fand nützliche Informationen in diesem Beitrag unten
fider
6

Eine reine CSSLösung ( #content { min-height: 100%; }) funktioniert in vielen Fällen, aber nicht in allen - insbesondere in IE6 und IE7.

Leider müssen Sie auf eine JavaScript-Lösung zurückgreifen, um das gewünschte Verhalten zu erzielen. Dies kann erreicht werden, indem die gewünschte Höhe für Ihren Inhalt berechnet <div>und als CSS-Eigenschaft in einer Funktion festgelegt wird:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Sie können diese Funktion dann als Handler für onLoadund onResizeEreignisse festlegen :

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>
Levik
quelle
3

Ich stimme Levik zu, da der übergeordnete Container auf 100% eingestellt ist, wenn Sie Seitenleisten haben und möchten, dass diese den Raum füllen, um mit der Fußzeile übereinzustimmen. Sie können sie nicht auf 100% einstellen, da sie ebenfalls 100 Prozent der übergeordneten Höhe betragen bedeutet, dass die Fußzeile bei Verwendung der Löschfunktion nach unten gedrückt wird.

Stellen Sie sich das so vor, wenn Ihre Kopfzeile eine Höhe von 50 Pixel und Ihre Fußzeile eine Höhe von 50 Pixel hat und der Inhalt nur automatisch an den verbleibenden Platz angepasst wird, z. B. 100 Pixel, und der Seitencontainer 100% dieses Werts beträgt, beträgt seine Höhe 200 Pixel. Wenn Sie dann die Seitenleistenhöhe auf 100% einstellen, beträgt sie 200 Pixel, obwohl sie genau zwischen Kopf- und Fußzeile passen soll. Stattdessen ist es 50px + 200px + 50px, sodass die Seite jetzt 300px groß ist, da die Seitenleisten auf die gleiche Höhe wie der Seitencontainer eingestellt sind. Der Inhalt der Seite enthält einen großen Leerraum.

Ich verwende Internet Explorer 9 und dies ist der Effekt, den ich bei Verwendung dieser 100% -Methode bekomme. Ich habe es nicht in anderen Browsern versucht und gehe davon aus, dass es in einigen anderen Optionen funktioniert. aber es wird nicht universell sein.

Clint
quelle
3

Zuerst sollten Sie ein divwith id='footer'nach Ihrem contentdiv erstellen und dann einfach dies tun.

Ihr HTML sollte folgendermaßen aussehen:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Und das CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}
Afshin Mehrabani
quelle
2

Wahrscheinlich die kürzeste Lösung (funktioniert nur in modernen Browsern)

Dieses kleine Stück CSS macht "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

Die einzige Voraussetzung ist, dass Sie eine Fußzeile mit fester Höhe benötigen.

Zum Beispiel für dieses Layout:

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

Sie benötigen dieses CSS:

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }
Konstantin Smolyanin
quelle
2

Versuche dies:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

Das divElement unter dem Inhalt div muss haben clear:both.

MilanBSD
quelle
0

Teile einfach, was ich benutzt habe und es funktioniert gut

#content{
        height: auto;
        min-height:350px;
}
Yuda Prawira
quelle
0

Wie in der Antwort von Afshin Mehrabani erwähnt, sollten Sie die Körpergröße und die Höhe von HTML auf 100% einstellen. Um die Fußzeile dorthin zu bringen, berechnen Sie die Höhe des Wrappers:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}
Fanky
quelle