100% Mindesthöhe CSS-Layout

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?

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.

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>

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

Die Antwort von kleolb02 sieht ziemlich gut aus. Ein anderer Weg wäre eine Kombination aus der klebrigen Fußzeile und dem Hack mit minimaler Höhe

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

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>

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.

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;        
}

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; }

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.

Sie können dies versuchen: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Das ist 100% Höhe und horizontale Mitte.

Teile einfach, was ich benutzt habe und es funktioniert gut

#content{
        height: auto;
        min-height:350px;
}

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);
}