Machen Sie ein div die Höhe des verbleibenden Platz auf dem Bildschirm füllen
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite an einer Web-Anwendung, wo ich die Inhalte will die Höhe des gesamten Bildschirms zu füllen.
Die Seite hat einen Header, der ein Logo enthält, und Kontoinformationen. Dies könnte eine beliebige Höhe sein. Ich möchte den Inhalt div den Rest der Seite nach unten zu füllen.
Ich habe einen Header div und einen Gehalt div. Im Moment benutze 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 gefüllt ist, und kein Scrollen erforderlich ist.
Für alles, was im Inneren des Content Div, top: 0; Einstellung wird es unter dem Kopf gutmachen. Manchmal wird der Inhalt eine echte Tabelle sein, mit seiner Höhe auf 100% gesetzt. header innen content Putting wird dies nicht zulassen, dass arbeiten.
Gibt es einen Weg, um die gleiche Wirkung zu erzielen, ohne die table mit?
Update:
Elemente innerhalb des Inhalts div werden Höhen als auch in Prozentsatz festgelegt haben. So etwas zu 100% innerhalb der div wird es auf den Boden füllen. Wie werden zwei Elemente bei 50%.
Update 2:
Zum Beispiel, wenn der Header 20% der Höhe des Bildschirms einnimmt, eine Tabelle mit 50% innerhalb #content angegeben würde 40% des Bildschirms Platzes. Bisher in einer Tabelle die ganze Sache Verpackung ist das einzige, was funktioniert.
Lösung
2015 Update: der Flexbox Ansatz
Es gibt zwei weitere Antworten kurz zu erwähnen Flexbox ; aber das war mehr als vor zwei Jahren, und sie bieten keine Beispiele. Die Spezifikation für Flexbox hat nun endgültig erledigt.
Hinweis: Obwohl CSS Flexible Boxen Layout-Spezifikation in der Candidate Recommendation Phase ist, nicht alle Browser haben es umgesetzt. WebKit-Implementierung muss mit -webkit- vorangestellt werden; Internet Explorer implementiert eine alte Version der Spezifikation, mit dem Präfix -MS-; Opera 12.10 setzt die neueste Version der Spezifikation, ohne Präfix. Siehe die Kompatibilitätstabelle auf jeder Eigenschaft für einen up-to-date Kompatibilitätsstatus.
(aus https://developer.mozilla.org/en-US/ docs / Web / Guide / CSS / Flexible_boxes )
Alle gängigen Browser und IE11 + unterstützen Flexbox. Für IE 10 oder älter sind, können Sie die FlexieJS Shim verwenden.
Um die aktuelle Unterstützung überprüfen Sie auch hier sehen können: http://caniuse.com/#feat=flexbox
Arbeitsbeispiel
Mit Flexbox Sie einfach zwischen jedem Ihren Zeilen oder Spalten entweder mit festen Abmessungen, Inhalt großen Abmessungen oder Restraumdimensionen wechseln. In meinem Beispiel habe ich den Header gesetzt haben, um seinen Inhalt zu schnappen (gemäß der OPs Frage), habe ich eine Fußzeile zu zeigen, hinzugefügt, wie ein fester Höhe Bereich hinzuzufügen und dann den Inhaltsbereich den verbleibenden Platz zu füllen.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
In der CSS über das flex Eigenschaft Kürzel die flex-grow , flex-schrumpfen und flex-Basis Eigenschaften die Flexibilität der flexiblen Elemente zu etablieren. Mozilla hat eine gute Einführung in die flexible Boxen Modell .
Andere Tipps
Es gibt wirklich keinen Ton, Cross-Browser-Weg, dies in CSS zu tun. Angenommen, Ihr Layout hat Komplexitäten, Sie müssen Javascript verwenden, um das Element in der Höhe eingestellt werden. Die Essenz dessen, was Sie tun müssen, ist:
Element Height = Viewport height - element.offset.top - desired bottom margin
Wenn Sie diesen Wert erhalten und stellen Sie die Höhe des Elements, müssen Sie Ereignishandler sowohl das Fenster onload und onresize befestigen, so dass Sie Ihre Formatfunktion abfeuern kann.
Auch Ihre Inhalte unter der Annahme, größer als der Darstellungsbereich sein könnte, müssen Sie Überlauf-y einstellen blättern.
Der ursprüngliche Beitrag ist mehr als 3 Jahre. Ich denke, viele Leute, die auf dieses Thema kommen wie ich für eine App-ähnliche Layout-Lösung suchen, sagen wir ein irgendwie festen Header, Footer, und voller Höhe Inhalt der Rest Bildschirms einnimmt. Wenn ja, kann dieser Beitrag helfen, es funktioniert auf IE7 +, etc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Und hier sind einige Auszüge aus diesem Beitrag:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>
Statt Tabellen im Markup verwenden, können Sie CSS-Tabellen verwenden.
Markup
<body>
<div>hello </div>
<div>there</div>
</body>
(Relevant) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Einige Vorteile dieser Methode sind:
1) Weniger Markup
2) Markup ist mehr semantische als Tabellen, da diese nicht tabellarische Daten ist.
3) Browser-Unterstützung ist sehr gut : IE8 +, Alle modernen Browser und mobile Geräte ( caniuse )
Nur der Vollständigkeit halber sind hier die entsprechenden HTML-Elemente zu CSS-Eigenschaften für den Die CSS-Tabellenmodell
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
CSS nur Approach (Wenn Höhe bekannt ist / fest)
Wenn Sie das mittlere Element wollen vertikal über die gesamte Seite zu überbrücken, können Sie calc() , die in CSS3 eingeführt.
Angenommen, wir haben eine feste Höhe header und footer Elemente und wir wollen, dass der section Tag gesamte zur Verfügung stehende vertikale Höhe nehmen ...
Mutmaßliche Markup
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
So CSS sollte
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Also hier, was tue, ist, auf die Höhe der Elemente hinzugefügt und als von 100% Abzug calc() Funktion.
So stellen Sie sicher, dass Sie height: 100%; für die übergeordneten Elemente verwenden.
Gebraucht:
height: calc(100vh - 110px);
Code:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>
Wie über Sie einfach vh benutzen, die für view height steht in CSS ...
Sehen Sie sich die Code-Snippet ich für Sie unten erstellt und führen Sie es:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>
Auch Blick auf das Bild unten, die ich für Sie erstellt:
CSS3 einfacher Weg
height: calc(100% - 10px); // 10px is height of your first div...
alle gängigen Browser in diesen Tagen unterstützen es, so gehen Sie vor, wenn Sie Vintage-Browser nicht Anforderung haben zu unterstützen.
Es rein CSS mit vh getan werden könnte:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
und die HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Ich habe es, es funktioniert in allen gängigen Browsern: Chrome, IE und FireFox
Eine einfache Lösung, mit Flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>
Eine alternative Lösung, mit einem div innerhalb des Inhalts div zentriert
Keine der Lösungen geschrieben Arbeit, wenn Sie den Boden div müssen scrollen, wenn der Gehalt zu hoch ist. Hier ist eine Lösung, die in diesem Fall funktioniert:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Ursprüngliche Quelle: Füllen der Resthöhe eines Containers Während Überlauf in CSS Handhabung
Ich habe auch für diese eine Antwort gesucht. Wenn Sie Glück genug, um in der Lage sind IE8 zu zielen und, können Sie display:table und die damit verbundene Werte verwenden, um die Rendering-Regeln von Tabellen mit Block-Level-Elementen wie div zu erhalten.
Wenn Sie noch mehr Glück und Ihre Benutzer verwenden Top-Tier-Browser (zum Beispiel, wenn es sich um eine Intranet-Anwendung auf Computern Sie die Kontrolle, wie mein neuestes Projekt ist), können Sie das neue Flexible Box Layout- in CSS3
Was für mich gearbeitet (mit einem div in einem anderen div und ich in allen anderen Fällen übernehme) ist die untere Polsterung auf 100% gesetzt. Das heißt, fügen Sie diese zu Ihrer css / Sheet:
padding-bottom: 100%;
Disclaimer: Die akzeptierte Antwort gibt die Idee der Lösung, aber ich finde es ein bisschen aufgebläht mit einer unnötigen Wrapper und CSS-Regeln. Nachfolgend finden Sie eine Lösung mit sehr wenigen CSS-Regeln.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
Lösung oben verwendet Darstellungseinheiten und Flexbox und ist daher IE10 +, Sie für IE10 verwenden, um die alte Syntax bereitstellt.
Codepen spielen mit: Link zu codepen
Oder diese, für diejenigen, die Hauptbehälter zu müssen sein scrollbaren bei überquellenden Inhalt: Link zu codepen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
In allen vernünftigen Browser, können Sie die „Header“ div, bevor der Inhalt setzen, als Geschwister, und die gleiche CSS funktionieren wird. Allerdings ist IE7- nicht die Höhe richtig interpretieren, wenn der Schwimmer 100% in diesem Fall ist, so dass die Kopfzeile im Inhalt sein muss, wie oben. Der Überlauf. Auto wird doppelt Scroll-Balken auf IE verursachen (die die Darstellungs Scrollbar sichtbar immer, aber deaktiviert), ohne sie jedoch, wird der Inhalt Clip, wenn er überläuft
Es gibt eine Tonne Antworten jetzt, aber ich fand height: 100vh; mit auf dem div-Elemente zu arbeiten, die den gesamten vertikalen Raum zur Verfügung füllen muss.
Auf diese Weise brauche ich nicht mit Display oder Positionierung zu spielen, um. Dies kam praktisch, wenn Bootstrap mit einem Armaturenbrett zu machen, wobei ich eine Sidebar hatte und einen Haupt. Ich wollte die Haupt den gesamten vertikalen Raum dehnen und zu füllen, so dass ich eine Hintergrundfarbe anwenden könnte.
div {
height: 100vh;
}
Unterstützt IE9 und bis: klicken Sie auf den Link
zu sehenWenn Sie mit nicht unterstützt alten Browser umgehen können (das heißt, MSIE 9 oder älter), können Sie dies mit Flexible Box Layout-Modul die bereits W3C CR ist. Das Modul ermöglicht es andere nette Tricks, auch, wie Nachbestellung Inhalt.
Leider MSIE 9 oder weniger tun dies nicht unterstützen, und Sie müssen Anbieter Präfix für die CSS-Eigenschaft für jeden anderen Browser als Firefox. Hoffentlich andere Anbieter das Präfix bald fallen, auch.
Eine wäre eine andere Wahl CSS Grid Layout- sein, aber das hat auch weniger Unterstützung von stabilen Versionen von Browsern . In der Praxis unterstützt nur MSIE 10 dies.
I wresteled mit dieser eine Zeit lang und endete mit dem folgenden:
Da ist es leicht, den Inhalt DIV die gleiche Höhe wie die Eltern zu machen, aber offensichtlich schwierig, die Mutterhöhe zu machen abzüglich die Kopfhöhe I Inhalt div voller Höhe machen beschlossen, aber Position absolut in der oberen linken Ecke und dann definiert eine Polsterung für die Oberseite, die die Höhe des Kopfteils hat. Auf diese Weise der Inhalt angezeigt ordentlich unter dem Header und füllt den gesamten verbleibenden Raum:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Warum nicht einfach so?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Geben Sie HTML-und Körper (in dieser Reihenfolge) eine Höhe und dann einfach Ihre Elemente eine Höhe geben?
Funktioniert bei mir
style="height:100vh"
löste das Problem für mich. In meinem Fall angewendet ich dies auf die erforderliche div
Just Definition den body mit display:grid und dem grid-template-rows mit auto und der fr Werteigenschaft.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Sie können tatsächlich display: table nutzen das Gebiet in zwei Elemente (Header und Inhalt) aufgeteilt, wobei der Kopf in der Höhe und der Inhalt füllt den verbleibenden Raum variieren. Dies funktioniert mit der ganzen Seite, als auch wenn die Gegend ist einfach der Inhalt eines anderen Elements mit position zu relative, absolute oder fixed gesetzt positioniert. Es wird funktionieren, solange das übergeordnete Element eine von Null verschiedene Höhe hat.
diese Geige und auch den Code unten:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Vincent, werde ich antworten wieder mit Ihrem neuen Anforderungen. Da Sie sind versteckt sich nicht um den Inhalt kümmern, wenn es zu lang ist, müssen Sie nicht den Header schweben. Einfach auf den HTML-und Body-Tags setzte Überlauf versteckt, und #content Höhe auf 100% gesetzt. Der Inhalt wird immer länger als das Ansichtsfenster durch die Höhe des Headers, aber es wird ausgeblendet und wird nicht dazu führen Scrollbalken.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Versuchen Sie, diese
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
fand ich eine ganz einfache Lösung, denn für mich ist es nur ein Design-Problem war. Ich wollte den Rest der Seite nicht unter dem roten Fußzeile weiß. So habe ich die Seiten Hintergrundfarbe auf rot. Und der Inhalt BACKGROUND auf weiß. Mit dem Inhalt Höhe zB festgelegt. 20em oder 50% eine fast leere Seite wird die ganze Seite rot nicht verlassen.
Für mobile app verwende ich nur VH und VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Ich hatte das gleiche Problem, aber ich konnte nicht die Lösung mit flexboxes oben zu arbeiten. Also habe ich meine eigene Vorlage erstellt, das beinhaltet:
- einen Header mit einer festen Größe Element
- eine Fußzeile
- eine Seitenleiste mit einem Scrollbalken, der die verbleibende Höhe besetzt
- Inhalt
Ich habe flexboxes aber auf einfachere Art und Weise, nur mit Eigenschaften Anzeige: flex und flex-Richtung: Zeile | Spalte :
Ich benutze Winkel- und ich mag, dass meine Komponentengrößen 100% ihrer Eltern-Elements sein.
Der Schlüssel ist, um die Größe (in Prozent) für alle Eltern zu setzen Inorder ihre Größe zu begrenzen. Im folgenden Beispiel myapp Höhe hat 100% der Ansichtsfenster.
Die Hauptkomponente hat 90% des Ansichtsfensters, weil Kopf- und Fußzeile 5% haben.
Ich habe meine Vorlage hier: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
die Idee von Mr. Alien Spinning off ...
Dies scheint eine sauberere Lösung als die beliebte Flex-Box eines für CSS3-fähige Browser.
Verwenden Sie einfach min-height (statt Höhe) mit calc (), um den Inhalt Block.
Die calc () mit 100% beginnt und subtrahiert Höhen von Kopf- und Fußzeilen (müssen padding Werte enthalten)
„min-height“ anstelle von „Höhe“ Verwendung ist besonders nützlich, so dass es mit Javascript gerenderten Inhalt und JS-Frameworks wie Angular2 arbeiten kann. Andernfalls wird die Berechnung nicht die Fußzeile auf den unteren Rand der Seite drücken, sobald die Javascript gerenderten Inhalt sichtbar ist.
Hier ist ein einfaches Beispiel für eine Kopf- und Fußzeile mit 50px Höhe und 20px padding für beide.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Natürlich kann die Mathematik vereinfacht werden, aber Sie bekommen die Idee ...
Es ist dynamisch berechnet der Remining Platz auf dem Bildschirm, besser mit Javascript.
Sie können CSS-IN-JS-Technologie, wie unten lib verwenden:
es arbeitet nie in anderem Weg für mich dann mit der Verwendung der JavaScript als NICCAI in der ersten Antwort vorgeschlagen. Ich benutze diesen Ansatz die <div> mit den Google Maps neu zu skalieren.
Dies ist das vollständige Beispiel, wie das (Arbeiten in Safari / Firefox / IE / iPhone / Andorid (funktioniert mit Rotation)) zu tun:
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
