Frage Stellen Sie mit einem div die Höhe des verbleibenden Bildschirmbereichs ein


Ich arbeite gerade an einer Webanwendung, bei der ich möchte, dass der Inhalt die Höhe des gesamten Bildschirms ausfüllt.

Die Seite hat eine Kopfzeile, die ein Logo und Kontoinformationen enthält. Dies könnte eine beliebige Höhe sein. Ich möchte, dass das Inhalts-Div den Rest der Seite nach unten füllt.

Ich habe einen Header div und ein 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 kein Scrollen ist erforderlich.

Für alles innerhalb des Inhalts-Div, Einstellung top: 0; wird es direkt unter dem Header setzen. Manchmal ist der Inhalt ein echter Tisch mit einer Höhe von 100%. Putten header Innerhalb content lässt dies nicht zu.

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

Aktualisieren:

Elemente innerhalb des Inhalts div werden auch Prozentwerte haben. Also etwas zu 100% in der div wird es bis zum Ende füllen. Wie werden zwei Elemente bei 50%.

Update 2:

Wenn die Kopfzeile beispielsweise 20% der Bildschirmhöhe einnimmt, wird innerhalb von 50% eine Tabelle angegeben #content würde 40% des Bildschirmplatzes einnehmen. Bis jetzt ist das einzige, was funktioniert, das ganze Ding in eine Tabelle zu wickeln.


1332
2017-09-18 05:06


Ursprung


Antworten:


Update 2015: Der Flexbox-Ansatz

Es gibt zwei andere Antworten, die kurz erwähnt werden Flexbox; Das war jedoch mehr als zwei Jahre her und sie liefern keine Beispiele. Die Spezifikation für flexbox hat sich jetzt definitiv erledigt.

Hinweis: Obwohl sich die CSS-Flexible-Box-Layout-Spezifikation in der Candidate Recommendation-Stufe befindet, wurde sie nicht von allen Browsern implementiert. Der WebKit-Implementierung muss das Präfix -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, ohne Präfix. In der Kompatibilitätstabelle für jede Eigenschaft finden Sie einen aktuellen Kompatibilitätsstatus.

(genommen von 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.

Um aktuelle Unterstützung zu sehen, können Sie auch hier sehen: http://caniuse.com/#feat=flexbox

Arbeitsbeispiel

Mit flexbox können Sie ganz einfach zwischen beliebigen Zeilen oder Spalten wechseln, die entweder feste Abmessungen, inhaltliche Abmessungen oder Restplatzabmessungen haben. In meinem Beispiel habe ich die Kopfzeile so eingerichtet, dass sie an ihrem Inhalt einrastet (gemäß der OPs-Frage), ich habe eine Fußzeile hinzugefügt, um zu zeigen, wie eine Region mit fester Höhe hinzugefügt wird und dann den Inhaltsbereich so ausfüllt, dass der verbleibende Platz belegt 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 CSS oben, die biegen Eigentum shorthands der flex-wachsen, Flex-Schrumpf, und Flex-Basis Eigenschaften, um die Flexibilität der Flex-Artikel zu ermitteln. Mozilla hat eine Gute Einführung in das flexible Boxmodell.


663
2017-07-27 08:14



Es gibt wirklich keinen Sound, Cross-Browser-Möglichkeit, dies in CSS zu tun. Wenn Ihr Layout komplex ist, müssen Sie JavaScript verwenden, um die Höhe des Elements festzulegen. Die Essenz dessen, 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 sowohl an das Fenster onload als auch an onresize anhängen, damit Sie Ihre Größenänderungsfunktion auslösen können.

Unter der Annahme, dass Ihr Inhalt größer als der Darstellungsbereich sein könnte, müssen Sie den Überlauf-y für den Bildlauf festlegen.


207
2017-09-18 08:16



Der ursprüngliche Beitrag ist vor mehr als 3 Jahren. Ich schätze, viele Leute, die wie ich zu diesem Post kommen, suchen nach einer App-ähnlichen Layout-Lösung, sagen eine irgendwie fixierte Kopfzeile, Fußzeile und Inhalt voller Höhe, die den Rest-Bildschirm einnimmt. Wenn ja, kann dieser Beitrag helfen, er 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 Auszüge aus diesem Post:

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


153
2017-10-21 15:02



Anstatt Tabellen im Markup zu verwenden, können Sie CSS-Tabellen verwenden.

Markierung

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevantes) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 und FIDDLE2

Einige Vorteile dieser Methode sind:

1) Weniger Markup

2) Markup ist semantischer als Tabellen, da es sich nicht um Tabellendaten handelt.

3) Browser-Unterstützung ist sehr gut: IE8 +, Alle modernen Browser und Mobilgeräte (kann ich benutzen)


Nur der Vollständigkeit halber, hier sind die entsprechenden HTML-Elemente zu CSS-Eigenschaften für die Das 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 } 

134
2018-06-06 11:20



Nur CSS Approach (Wenn die Höhe bekannt ist / fixiert)

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

Angenommen, wir haben eine feste Höhe  header und footer Elemente und wir wollen das section Markierung, um die gesamte verfügbare vertikale Höhe zu nehmen ...

Demo

Angenommenes Markup

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

Also sollte dein 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;
}

Also, hier ist, was ist, addieren die Höhe der Elemente und dann abziehen von 100% verwenden calc() Funktion.

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


76
2018-04-27 12:05



Benutzt: 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>


37
2018-05-22 03:20



Es könnte rein durch gemacht werden CSS verwenden vh:

#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 das 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


24
2017-09-14 21:09



Keine der 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:

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 verbleibenden Höhe eines Containers während des Überlaufs in CSS

JSFiddle Live-Vorschau


22
2018-02-20 17:12