Ich arbeite an einer Webanwendung, bei der der Inhalt die Höhe des gesamten Bildschirms ausfüllen soll.
Die Seite hat eine Kopfzeile, die ein Logo und Kontoinformationen enthält. Dies kann eine beliebige Höhe sein. Ich möchte, dass der Inhaltsbereich den Rest der Seite bis zum Ende ausfüllt.
Ich habe einen Header div
und einen Inhalt div
. Im Moment verwende ich eine Tabelle für das Layout wie folgt:
CSS und HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
Die gesamte Höhe der Seite ist gefüllt und es ist kein Bildlauf erforderlich.
Für alles innerhalb des Inhaltsbereichs top: 0;
wird es durch die Einstellung direkt unter der Kopfzeile platziert. Manchmal ist der Inhalt eine echte Tabelle, deren Höhe auf 100% eingestellt ist. Wenn Sie header
hineinstecken content
, funktioniert dies nicht.
Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, ohne das zu verwenden table
?
Aktualisieren:
Bei Elementen innerhalb des Inhalts div
werden die Höhen ebenfalls auf Prozentsätze festgelegt. Also etwas zu 100% in derdiv
füllt es also bis zum Boden. Wie zwei Elemente bei 50%.
Update 2:
Wenn der Header beispielsweise 20% der Bildschirmhöhe einnimmt, nimmt eine mit 50% angegebene Tabelle #content
40% des Bildschirmplatzes ein. Bisher funktioniert nur das Einwickeln der gesamten Sache in eine Tabelle.
quelle
display:table
und verwandte Eigenschaften verwenden. Diese Antwort auf eine sehr ähnliche Frage finden Sie in dieser Antwort .Antworten:
Update 2015: Der Flexbox-Ansatz
Es gibt zwei weitere Antworten, in denen Flexbox kurz erwähnt wird . Das war jedoch vor mehr als zwei Jahren, und sie liefern keine Beispiele. Die Spezifikation für Flexbox hat sich jetzt definitiv festgelegt.
Alle gängigen Browser und IE11 + unterstützen Flexbox. Für IE 10 oder älter können Sie die FlexieJS-Unterlegscheibe verwenden.
Um den aktuellen Support zu überprüfen, können Sie auch hier sehen: http://caniuse.com/#feat=flexbox
Arbeitsbeispiel
Mit der Flexbox können Sie problemlos zwischen Zeilen oder Spalten mit festen Abmessungen, inhaltsgroßen Abmessungen oder verbleibenden Abmessungen wechseln. In meinem Beispiel habe ich den Header so eingestellt, dass er an seinem Inhalt ausgerichtet wird (gemäß der Frage des OP). Ich habe eine Fußzeile hinzugefügt, um zu zeigen, wie ein Bereich mit fester Höhe hinzugefügt wird, und dann den Inhaltsbereich so eingestellt, dass der verbleibende Speicherplatz ausgefüllt wird.
In der CSS über das Flex - Eigenschaft Kürzel des Flex-grow , flex-Schrumpf und Flex-Basis Eigenschaften die Flexibilität der flexiblen Elemente zu etablieren. Mozilla hat eine gute Einführung in das Modell der flexiblen Boxen .
quelle
flex: 0 1 30px;
Attributbox .row
in jedem Div überschrieben?overflow-y: auto
das.row.content
zu erreichen, was Sie benötigen.Es gibt wirklich keine solide, browserübergreifende Möglichkeit, dies in CSS zu tun. Angenommen, Ihr Layout ist komplex, müssen Sie JavaScript verwenden, um die Höhe des Elements festzulegen. Das Wesentliche an dem, was Sie tun müssen, ist:
Sobald Sie diesen Wert erhalten und die Höhe des Elements festlegen können, müssen Sie Ereignishandler sowohl an das Fenster onload als auch an onresize anhängen, damit Sie Ihre Größenänderungsfunktion auslösen können.
Angenommen, Ihr Inhalt könnte größer als das Ansichtsfenster sein, müssen Sie zum Scrollen den Überlauf y festlegen.
quelle
Der ursprüngliche Beitrag ist vor mehr als 3 Jahren. Ich denke, viele Leute, die wie ich zu diesem Beitrag kommen, suchen nach einer App-ähnlichen Layoutlösung, sagen wir, dass ein irgendwie fester Header, eine Fußzeile und Inhalte in voller Höhe den Restbildschirm einnehmen. Wenn ja, kann dieser Beitrag helfen, es funktioniert auf IE7 + usw.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Und hier sind einige Ausschnitte aus diesem Beitrag:
quelle
display: table
in den Körper stecke, scheint es den Körper zu überfluten. Dasheight: 100%
ergibt also nicht die richtige Höhe..col
wird nicht verwendet, oder?Anstatt Tabellen im Markup zu verwenden, können Sie auch CSS-Tabellen verwenden.
Markup
(Relevantes) CSS
FIDDLE1 und FIDDLE2
Einige Vorteile dieser Methode sind:
1) Weniger Aufschlag
2) Markup ist semantischer als Tabellen, da es sich nicht um tabellarische Daten handelt.
3) Browser-Unterstützung ist sehr gut : IE8 +, Alle modernen Browser und Mobilgeräte ( caniuse )
Der Vollständigkeit halber sind hier die entsprechenden HTML-Elemente zu den CSS- Eigenschaften für das CSS-Tabellenmodell aufgeführt
quelle
html, body { height: 100%, width: 100% }
schien in meinen Tests kritisch zu sein.relative
Positionierung auf demtable-row
Element zu ignorieren scheint und daher die Höhe des zuerst positionierten Aszendenten annimmt, der kein Tabellenelement ist.Nur CSS-Ansatz (Wenn die Höhe bekannt / fest ist)
Wenn Sie möchten, dass sich das mittlere Element vertikal über die gesamte Seite erstreckt, können Sie
calc()
das in CSS3 eingeführte Element verwenden .Angenommen, wir haben eine feste Höhe
header
und festefooter
Elemente und möchten, dass dassection
Tag die gesamte verfügbare vertikale Höhe einnimmt ...Demo
Angenommenes Markup und Ihr CSS sollten sein
Was ich hier mache, ist, die Höhe der Elemente zu addieren und dann von der
100%
Verwendung abzuziehencalc()
Funktion ab.Stellen Sie einfach sicher, dass Sie
height: 100%;
für die übergeordneten Elemente verwenden.quelle
Benutzt:
height: calc(100vh - 110px);
Code:
quelle
Eine einfache Lösung mit Flexbox:
Codepen-Beispiel
Eine alternative Lösung, bei der ein div innerhalb des Inhalts div zentriert ist
quelle
Wie wäre es, wenn Sie einfach das verwenden,
vh
wofürview height
in CSS steht ...Schauen Sie sich das Code-Snippet an, das ich unten für Sie erstellt habe, und führen Sie es aus:
Schauen Sie sich auch das Bild an, das ich für Sie erstellt habe:
quelle
CSS3 Einfacher Weg
Alle gängigen Browser unterstützen dies heutzutage. Fahren Sie fort, wenn Sie keine Vintage-Browser unterstützen müssen.
quelle
Es könnte rein gemacht werden
CSS
mitvh
:und der
HTML
Ich habe es, es in allen gängigen Browsern funktioniert:
Chrome
,IE
, undFireFox
quelle
vh
undvw
Einheiten vor. Weitere Informationen: snook.ca/archives/html_and_css/vm-vh-unitsheight: 100%
auf#content
verursacht seine Höhe , dass der anzupassen#page
, ohne auf#tdcontent
insgesamt ‚s Höhe. Bei viel Inhalt erstreckt sich die Bildlaufleiste über den unteren Rand der Seite hinaus.Keine der veröffentlichten Lösungen funktioniert, wenn Sie das untere Div zum Scrollen benötigen, wenn der Inhalt zu groß ist. Hier ist eine Lösung, die in diesem Fall funktioniert:
Originalquelle: Füllen der verbleibenden Höhe eines Containers beim Behandeln des Überlaufs in CSS
JSFiddle Live-Vorschau
quelle
body-content-wrapper
, und die Dinge scheinen ohne den Double Wrapper (ohnetable-cell
s) gut zu funktionieren . Gibt es ein Problem damit?.body
Höhe in IE10 und darunter der Höhe der eingestellten Höhe.container
. Die vertikale Bildlaufleiste befindet sich immer noch an der richtigen Stelle, aber die wird.container
am Ende größer gedehnt als wir wollen. Wenn es sich um einen Vollbildmodus handelt,.body
befindet sich der untere Rand des unteren Bildschirms.Ich habe auch nach einer Antwort gesucht. Wenn Sie das Glück haben, auf IE8 und höher abzielen zu können, können Sie
display:table
und verwandte Werte verwenden, um die Renderregeln von Tabellen mit Elementen auf Blockebene einschließlich div abzurufen.Wenn Sie noch mehr Glück haben und Ihre Benutzer erstklassige Browser verwenden (z. B. wenn es sich um eine Intranet-App auf Computern handelt, die Sie steuern, wie es mein aktuelles Projekt ist), können Sie das neue flexible Box-Layout in CSS3 verwenden!
quelle
Was für mich funktioniert hat (mit einem Div innerhalb eines anderen Div und ich nehme unter allen anderen Umständen an), ist, die untere Polsterung auf 100% zu setzen. Das heißt, fügen Sie dies Ihrem CSS / Stylesheet hinzu:
quelle
HTML 5
CSS
Die obige Lösung verwendet Ansichtsfenstereinheiten und Flexbox und ist daher IE10 +, vorausgesetzt, Sie verwenden die alte Syntax für IE10.
Codepen zum Spielen: Link zum Codepen
Oder dieses für diejenigen, bei denen der Hauptcontainer bei überfülltem Inhalt scrollbar sein muss: Link zum Codepen
quelle
Es gibt jetzt eine Menge Antworten, aber ich habe sie gefunden
height: 100vh;
dem div-Element arbeite, das den gesamten verfügbaren vertikalen Raum ausfüllen muss.Auf diese Weise muss ich nicht mit der Anzeige oder Positionierung herumspielen. Dies war praktisch, wenn ich Bootstrap verwendete, um ein Dashboard zu erstellen, in dem ich eine Seitenleiste und eine Hauptleiste hatte. Ich wollte, dass die Hauptleitung den gesamten vertikalen Raum dehnt und ausfüllt, damit ich eine Hintergrundfarbe auftragen kann.
Unterstützt IE9 und höher: Klicken Sie hier, um den Link anzuzeigen
quelle
In allen vernünftigen Browsern können Sie das "Header" -Div als Geschwister vor den Inhalt stellen, und dasselbe CSS funktioniert. IE7- interpretiert die Höhe jedoch nicht richtig, wenn der Gleitkommawert in diesem Fall 100% beträgt. Daher muss sich der Header wie oben im Inhalt befinden. Der Überlauf: auto führt im IE zu doppelten Bildlaufleisten (in denen die Bildlaufleiste des Ansichtsfensters immer sichtbar, aber deaktiviert ist). Ohne diese Funktion wird der Inhalt jedoch abgeschnitten, wenn er überläuft.
quelle
div
... positionierentop: 0;
werde, dh etwas direkt unter den Header setzen werde. Ich werde meine Frage noch einmal ändern, weil Sie sie perfekt beantwortet haben und immer noch nicht das, was ich will! Ich werde nur den Überlauf ausblenden, da der Inhalt passen muss.Ich rang eine Weile damit und endete mit Folgendem:
Da es einfach ist, den Inhalt DIV auf die gleiche Höhe wie den übergeordneten Inhalt zu bringen, aber anscheinend schwierig ist, ihn auf die übergeordnete Höhe abzüglich der Kopfzeile zu bringen, habe ich beschlossen, den Inhalt div auf die volle Höhe zu bringen, ihn aber absolut in der oberen linken Ecke zu positionieren und dann einen Abstand zu definieren für die Oberseite, die die Höhe des Headers hat. Auf diese Weise wird der Inhalt ordentlich unter der Kopfzeile angezeigt und füllt den gesamten verbleibenden Platz aus:
quelle
Wenn Sie damit umgehen können, dass alte Browser (dh MSIE 9 oder älter) nicht unterstützt werden, können Sie dies mit dem Flexible Box Layout Module tun das bereits W3C CR ist. Dieses Modul ermöglicht auch andere nette Tricks, wie das Nachbestellen von Inhalten.
Leider unterstützt MSIE 9 oder weniger dies nicht und Sie müssen für jeden anderen Browser als Firefox das Herstellerpräfix für die CSS-Eigenschaft verwenden. Hoffentlich lassen auch andere Anbieter das Präfix bald fallen.
Eine andere Möglichkeit wäre das CSS-Grid-Layout , das jedoch von stabilen Browserversionen noch weniger unterstützt wird. In der Praxis unterstützt dies nur MSIE 10.
Update Jahr 2020 : Alle modernen Browser unterstützen sowohl
display: flex
unddisplay: grid
. Das einzige, was fehlt, ist die Unterstützung,subgrid
die nur von Firefox unterstützt wird. Beachten Sie, dass MSIE auch von der Spezifikation nicht unterstützt wird. Wenn Sie jedoch bereit sind, MSIE-spezifische CSS-Hacks hinzuzufügen, kann dies zu einem Verhalten führen. Ich würde vorschlagen, MSIE einfach zu ignorieren, da selbst Microsoft sagt, dass es nicht mehr verwendet werden sollte.quelle
CSS-Grid-Lösung
Definieren Sie einfach die Eigenschaft
body
withdisplay:grid
undgrid-template-rows
usingauto
undfr
value.Eine vollständige Anleitung zu Grids @ CSS-Tricks.com
quelle
Warum nicht einfach so?
Geben Sie HTML und Körper (in dieser Reihenfolge) eine Höhe und geben Sie Ihren Elementen dann einfach eine Höhe?
Funktioniert bei mir
quelle
Sie können
display: table
den Bereich tatsächlich in zwei Elemente (Kopfzeile und Inhalt) aufteilen, wobei die Höhe der Kopfzeile variieren kann und der Inhalt den verbleibenden Raum ausfüllt. Dies funktioniert mit der gesamten Seite sowie wenn der Bereich einfach der Inhalt eines anderen Elements ist, das mitposition
set auf oder positioniertrelative
ist . Dies funktioniert so lange, wie das übergeordnete Element eine Höhe ungleich Null hat.absolute
fixed
Siehe diese Geige und auch den Code unten:
CSS:
HTML:
quelle
löste das Problem für mich. In meinem Fall habe ich dies auf das erforderliche div angewendet
quelle
Vincent, ich werde wieder mit deinen neuen Anforderungen antworten. Da es Ihnen egal ist, ob der Inhalt ausgeblendet wird, wenn er zu lang ist, müssen Sie den Header nicht schweben lassen. Setzen Sie einfach einen Überlauf auf die HTML- und Body-Tags und stellen Sie die
#content
Höhe auf 100% ein. Der Inhalt ist um die Höhe der Kopfzeile immer länger als das Ansichtsfenster, wird jedoch ausgeblendet und verursacht keine Bildlaufleisten.quelle
table
weil es funktioniert. Danke für das Update.Versuche dies
quelle
Ich habe eine recht einfache Lösung gefunden, weil es für mich nur ein Designproblem war. Ich wollte, dass der Rest der Seite unter der roten Fußzeile nicht weiß ist. Also habe ich die Hintergrundfarbe der Seiten auf Rot gesetzt. Und der Inhalt Hintergrundfarbe zu weiß. Bei eingestellter Inhaltshöhe z. 20em oder 50% eine fast leere Seite lässt nicht die ganze Seite rot.
quelle
Ich hatte das gleiche Problem, konnte aber mit den oben genannten Flexboxen keine Lösung finden. Also habe ich meine eigene Vorlage erstellt, die Folgendes beinhaltet:
Ich habe Flexboxen verwendet, aber auf einfachere Weise, wobei nur die Eigenschaften angezeigt wurden: Anzeige und Flex-Richtung: Zeile | Spalte :
Ich verwende Angular und möchte, dass meine Komponentengrößen 100% des übergeordneten Elements betragen.
Der Schlüssel besteht darin, die Größe (in Prozent) für alle Eltern festzulegen, um ihre Größe zu begrenzen. Im folgenden Beispiel hat die myapp-Höhe 100% des Ansichtsfensters.
Die Hauptkomponente hat 90% des Ansichtsfensters, da Kopf- und Fußzeile 5% haben.
Ich habe meine Vorlage hier veröffentlicht: https://jsfiddle.net/abreneliere/mrjh6y2e/3
Html:
quelle
Für die mobile App verwende ich nur VH und VW
Demo - https://jsfiddle.net/u763ck92/
quelle
Aus der Idee von Mr. Alien ...
Dies scheint eine sauberere Lösung zu sein als die beliebte Flexbox für CSS3-fähige Browser.
Verwenden Sie einfach die minimale Höhe (anstelle der Höhe) mit calc () für den Inhaltsblock.
Das calc () beginnt mit 100% und subtrahiert die Höhe der Kopf- und Fußzeilen (muss Füllwerte enthalten).
Die Verwendung von "min-height" anstelle von "height" ist besonders nützlich, damit mit mit Javascript gerenderten Inhalten und JS-Frameworks wie Angular2 gearbeitet werden kann. Andernfalls wird die Fußzeile bei der Berechnung nicht an den unteren Rand der Seite verschoben, sobald der mit Javascript gerenderte Inhalt sichtbar ist.
Hier ist ein einfaches Beispiel für eine Kopf- und Fußzeile mit einer Höhe von 50 Pixel und einer Polsterung von 20 Pixel für beide.
Html:
CSS:
Natürlich kann die Mathematik vereinfacht werden, aber Sie bekommen die Idee ...
quelle
In Bootstrap:
CSS-Stile:
1) Füllen Sie einfach die Höhe des verbleibenden Bildschirmbereichs aus:
2) Füllen Sie die Höhe des verbleibenden Bildschirmbereichs aus und richten Sie den Inhalt an der Mitte des übergeordneten Elements aus:
quelle
Dies ist meine eigene Minimalversion von Pebbls Lösung. Es hat ewig gedauert, den Trick zu finden, um es in IE11 zum Laufen zu bringen. (Auch in Chrome, Firefox, Edge und Safari getestet.)
quelle