web-dev-qa-db-de.com

Machen Sie ein Div, das die Höhe des verbleibenden Bildschirmbereichs ausfüllt

Ich arbeite an einer Webanwendung, bei der der Inhalt den gesamten Bildschirm ausfüllen soll.

Die Seite enthält eine Kopfzeile mit einem Logo und Kontoinformationen. Dies kann eine beliebige Höhe sein. Ich möchte, dass der Inhalt div den Rest der Seite bis zum Ende ausfüllt.

Ich habe einen Header div und einen Inhalt 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 wird ausgefüllt und es ist kein Scrollen erforderlich.

Wenn Sie top: 0; für einen Inhalt innerhalb des Inhaltsbereichs festlegen, wird dieser direkt unter der Kopfzeile angezeigt. Manchmal ist der Inhalt eine echte Tabelle, deren Höhe auf 100% festgelegt ist. Wenn Sie header in content setzen, funktioniert dies nicht.

Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, ohne table zu verwenden?

pdate:

Bei Elementen im Inhalt div werden die Höhen ebenfalls auf Prozent gesetzt. Also wird etwas mit 100% innerhalb von div den Boden füllen. Ebenso zwei Elemente zu 50%.

pdate 2:

Wenn beispielsweise die Kopfzeile 20% der Bildschirmhöhe einnimmt, würde eine mit 50% in #content angegebene Tabelle 40% des Bildschirmbereichs einnehmen. Bisher funktioniert es nur, wenn man das Ganze in einen Tisch packt.

1660
Vincent McNabb

Update 2015: der flexbox Ansatz

Es gibt zwei andere Antworten, die kurz flexbox erwähnen. Das war jedoch vor mehr als zwei Jahren, und sie liefern keine Beispiele. Die Spezifikation für flexbox ist jetzt definitiv festgelegt.

Hinweis: Die Layoutspezifikation für CSS Flexible Boxes befindet sich zwar in der Phase der Kandidatenempfehlung, wurde jedoch nicht von allen Browsern implementiert. Der WebKit-Implementierung muss -webkit- vorangestellt werden. Internet Explorer implementiert eine alte Version der Spezifikation mit dem Präfix -ms-. Opera 12.10 implementiert die neueste Version der Spezifikation, nicht vorfixiert. In der Kompatibilitätstabelle für jede Eigenschaft finden Sie einen aktuellen Kompatibilitätsstatus.

(entnommen 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 können Sie das FlexieJS-Shim verwenden.

Informationen zur aktuellen Unterstützung finden Sie auch hier: http://caniuse.com/#feat=flexbox

Arbeitsbeispiel

Mit flexbox können Sie problemlos zwischen beliebigen Zeilen oder Spalten mit festen Abmessungen, inhaltsgroßen Abmessungen oder Abmessungen des verbleibenden Raums wechseln. In meinem Beispiel habe ich die Kopfzeile so eingestellt, dass sie am Inhalt ausgerichtet ist (gemäß der Frage zu OPs). Ich habe eine Fußzeile hinzugefügt, um zu zeigen, wie ein Bereich mit fester Höhe hinzugefügt wird, und habe dann den Inhaltsbereich so eingestellt, dass der verbleibende Platz gefüllt wird.

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 obigen CSS steht die Eigenschaft flex für flex-grow , flex-shrink und flex-basis Eigenschaften, um die Flexibilität der flexiblen Elemente herzustellen. Mozilla hat eine gute Einführung in das flexible Boxenmodell .

910
Pebbl

In CSS gibt es wirklich keine vernünftige, browserübergreifende Möglichkeit, dies zu tun. Angenommen, Ihr Layout ist komplex, müssen Sie JavaScript verwenden, um die Höhe des Elements festzulegen. Das Wesentliche, was Sie tun müssen, ist:

Element Height = Viewport height - element.offset.top - desired bottom margin

Sobald Sie diesen Wert abrufen und die Höhe des Elements festlegen können, müssen Sie Ereignishandler an das Fenster onload und onresize anhängen, damit Sie Ihre Größenänderungsfunktion auslösen können.

Angenommen, Ihr Inhalt ist möglicherweise größer als das Ansichtsfenster, müssen Sie den Überlauf-y einstellen, um einen Bildlauf durchzuführen.

219
NICCAI

Der ursprüngliche Beitrag ist mehr als 3 Jahre her. Ich schätze, viele Leute, die wie ich zu diesem Beitrag kommen, suchen nach einer app-ähnlichen Layout-Lösung, sagen wir, eine irgendwie feste Kopf- und Fußzeile und Inhalt in voller Höhe, die den Rest des Bildschirms 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:

@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>
162
h--n

CSS only Approach (Wenn die Höhe bekannt/festgelegt ist)

Wenn Sie möchten, dass sich das mittlere Element vertikal über die gesamte Seite erstreckt, können Sie calc() verwenden, das in CSS3 eingeführt wird.

Angenommen, wir haben ein festes header - und footer -Element und möchten, dass das section -Tag die gesamte verfügbare vertikale Höhe einnimmt ...

Demo

Angenommenes Markup

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

So sollte Ihr CSS sein

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

Hier geht es also darum, die Höhe der Elemente zu addieren und dann mit der Funktion calc() von 100% abzuziehen.

Stellen Sie einfach sicher, dass Sie height: 100%; für die übergeordneten Elemente verwenden.

85
Mr. Alien

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>
50
nguyên

Wie wäre es, wenn Sie einfach vh verwenden, das für view 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:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Schauen Sie sich auch das Bild an, das ich für Sie erstellt habe:

Make a div fill the height of the remaining screen space

35
Alireza

CSS3 Simple Way

height: calc(100% - 10px); // 10px is height of your first div...

heutzutage wird es von allen gängigen Browsern unterstützt. Fahren Sie also fort, wenn Sie keine älteren Browser benötigen.

32
dev.meghraj

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>

Codepen-Probe

Eine alternative Lösung mit einem innerhalb des Inhalts div zentrierten div

27
zok

Dies könnte durch CSS mit vh erfolgen:

#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 überprüft. Es funktioniert in allen gängigen Browsern: Chrome, IE und FireFox

27
Ormoz

Keine der angegebenen Lösungen funktioniert, wenn Sie den unteren Bereich zum Blättern benötigen, wenn der Inhalt zu groß 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;
}

Originalquelle: Resthöhe eines Containers bei Überlauf in CSS füllen

JSFiddle Live-Vorscha

26
John Kurlak

Ich habe auch nach einer Antwort dafür gesucht. Wenn Sie das Glück haben, auf IE8 und höher abzielen zu können, können Sie display:table und zugehörige Werte verwenden, um die Wiedergaberegeln 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 wie mein letztes Projekt steuern), können Sie das neue Flexible Box Layout verwenden = in CSS3!

23
Chris

Was bei mir funktioniert hat (mit einem Div innerhalb eines anderen Div und ich gehe unter allen anderen Umständen davon aus), ist die Einstellung der unteren Polsterung auf 100%. Das heißt, fügen Sie dies zu Ihrem CSS/Stylesheet hinzu:

padding-bottom: 100%;

Haftungsausschluss: Die akzeptierte Antwort gibt die Idee der Lösung wieder, aber ich finde sie etwas aufgebläht mit unnötigen Wrapper- und CSS-Regeln. Unten 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 */
}

Die obige Lösung verwendet Ansichtsfenster-Einheiten und Flexbox und ist daher IE10 +, sofern Sie die alte Syntax für IE10 verwenden.

Codepen zum Spielen: Link zum Codepen

Oder dieses, wenn der Hauptcontainer bei Überlauf des Inhalts scrollbar sein soll: Link zum Codepen

15
<!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 Browsern können Sie den Div "header" als Geschwister vor den Inhalt setzen, und dasselbe CSS funktioniert. IE7- interpretiert die Höhe jedoch nicht richtig, wenn der Float in diesem Fall 100% beträgt. Daher muss der Header wie oben im Inhalt enthalten sein. Der Überlauf: auto bewirkt doppelte Bildlaufleisten in IE (die Bildlaufleiste des Ansichtsfensters ist immer sichtbar, aber deaktiviert). Ohne diese Funktion wird der Inhalt jedoch abgeschnitten, wenn er überläuft.

13
Jerph

Es gibt jetzt eine Menge Antworten, aber ich habe festgestellt, dass ich mit height: 100vh; an dem div-Element gearbeitet habe, das den gesamten verfügbaren vertikalen Raum ausfüllen muss.

Auf diese Weise muss ich nicht mit der Anzeige oder Positionierung herumspielen. Dies hat sich als nützlich erwiesen, als ich mit Bootstrap ein Dashboard mit einer Seitenleiste und einer Hauptleiste erstellt habe. Ich wollte, dass der Hauptteil den gesamten vertikalen Raum ausdehnt und ausfüllt, damit ich eine Hintergrundfarbe anwenden kann.

div {
    height: 100vh;
}

Unterstützt IE9 und höher: Klicken Sie hier, um den Link zu sehen

13
Puiu

Ich habe eine Weile damit gerungen und kam zu folgendem Ergebnis:

Da es einfach ist, den Inhalt DIV auf die gleiche Höhe wie das übergeordnete Element, aber anscheinend auf die übergeordnete Höhe abzüglich der Höhe der Kopfzeile zu bringen, habe ich beschlossen, den Inhalt div auf die volle Höhe zu setzen, 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 Überschrift angezeigt und füllt den gesamten verbleibenden Raum aus:

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%;
}
10
B_G

Wenn Sie feststellen können, dass alte Browser (dh MSIE 9 oder älter) nicht unterstützt werden, können Sie dies mit Flexible Box Layout Module tun, das bereits W3C CR ist. Dieses Modul erlaubt auch andere nette Tricks, wie das Nachbestellen von Inhalten.

Leider wird dies von MSIE 9 oder einer niedrigeren Version nicht unterstützt, und Sie müssen das Herstellerpräfix für die CSS-Eigenschaft für jeden anderen Browser als Firefox verwenden. Hoffentlich lassen andere Anbieter das Präfix bald auch fallen.

Eine andere Wahl wäre CSS Grid Layout , aber dies wird von stabilen Browserversionen noch weniger unterstützt. In der Praxis wird dies nur von MSIE 10 unterstützt.

10

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 geben Sie Ihren Elementen dann einfach eine Höhe?

Funktioniert bei mir

9
Thaoms
 style="height:100vh"

löste das Problem für mich. In meinem Fall habe ich dies auf die erforderliche div angewendet

8
Zohab Ali

CSS Grid Solution

Definieren Sie einfach body mit display:grid und grid-template-rows mit auto und der Value-Eigenschaft fr.

* {
  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>

Eine vollständige Anleitung zu Grids @ CSS-Tricks.com

7
Paulie_D

Sie können display: table verwenden, um den Bereich in zwei Elemente (Überschrift und Inhalt) aufzuteilen, wobei die Höhe der Überschrift 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, bei dem position auf relative, absolute oder fixed gesetzt ist. Es funktioniert, solange das übergeordnete Element eine Höhe ungleich Null hat.

Siehe 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>
5
Greg

Vincent, ich antworte noch einmal mit Ihren neuen Anforderungen. 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 den versteckten Überlauf auf die Tags html und body und setzen Sie die Höhe von #content auf 100%. Der Inhalt ist immer um die Höhe der Kopfzeile länger als das Ansichtsfenster, wird jedoch ausgeblendet und verursacht keine Bildlaufleisten.

<!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>
5
Jerph

Versuche dies

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
4
Arun

Ich fand eine recht einfache Lösung, 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ß. Mit der Inhaltshöhe auf z. 20em oder 50% eine fast leere Seite lässt nicht die ganze Seite rot.

3
htho

Für die 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;
}

Demo - https://jsfiddle.net/u763ck92/

3
grinmax

Die Idee von Mr. Alien abspinnen ...

Dies scheint eine sauberere Lösung zu sein als die populäre Flex-Box für CSS3-fähige Browser.

Verwenden Sie einfach min-height (anstelle von height) mit calc () für den Inhaltsblock.

Das calc () beginnt mit 100% und subtrahiert die Höhen von Kopf- und Fußzeilen (es müssen Auffüllwerte enthalten sein)

Die Verwendung von "min-height" anstelle von "height" ist besonders nützlich, damit sie mit Inhalten mit Javascript und JS-Frameworks wie Angular2 funktioniert. Andernfalls wird bei der Berechnung die Fußzeile nicht an den unteren Rand der Seite verschoben, sobald der mit Javascript wiedergegebene Inhalt sichtbar ist.

Hier ist ein einfaches Beispiel für eine Kopf- und Fußzeile mit einer Höhe von 50 Pixel und einem Abstand von 20 Pixel.

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 ...

2
Pat M

Ich hatte das gleiche Problem, aber ich konnte die Lösung mit den obigen Flexboxen nicht zum Laufen bringen. Also habe ich meine eigene Vorlage erstellt, die Folgendes beinhaltet:

  • eine Kopfzeile mit einem Element fester Größe
  • eine Fußzeile
  • eine Seitenleiste mit einer Bildlaufleiste, die die verbleibende Höhe einnimmt
  • inhalt

Ich habe Flexboxen verwendet, aber auf einfachere Weise und nur Eigenschaften verwendet. Anzeige: flex und flex-direction: row | Spalte :

Ich verwende angular und möchte, dass meine Komponentengrößen 100% ihres übergeordneten Elements betragen.

Der Schlüssel ist, die Größe (in Prozent) für alle Eltern festzulegen, um ihre Größe zu begrenzen. Im folgenden Beispiel hat myapp height 100% des Ansichtsfensters.

Die Hauptkomponente hat 90% des Ansichtsfensters, da Kopf- und Fußzeile 5% haben.

Ich habe meine Vorlage hier gepostet: https://jsfiddle.net/abreneliere/mrjh6y2e/

       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>
2

Es ist dynamisch und berechnet den verbleibenden Bildschirmbereich, besser mit Javascript.

Sie können die CSS-IN-JS-Technologie wie folgt verwenden:

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

0
James Yang