Wie fülle ich 100% der verbleibenden Höhe?

78 
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Der Inhalt von (1), wie oben gezeigt, ist unbekannt, da er bei dynamisch erzeugten Seiten zunehmen oder abnehmen kann. Das zweite Div (2) wie oben gezeigt sollte den verbleibenden Raum füllen.

Hier ist ein Beispiel für mein HTML

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

CSS ...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Oder ist diese Methode falsch? Wie soll ich das machen? Bitte sehen Sie meine Demo und zeigen Sie mir meinen Fehler.

html css height fill Bhojendra Rauniyar
quelle
Möchten Sie, dass die Höhe von 1 + 2 genau der Höhe des Ansichtsfensters entspricht? Oder 2 hat die gleiche Größe wie das Ansichtsfenster und wird entsprechend der Höhe von 1 nach unten gescrollt?
Thgaskell
Höhe von 1 Ich weiß nicht, und Rest von 1 dann 2 ist volle Höhe.
Bhojendra Rauniyar
@ C-Link Was meinst du damit height:100%? Meinst du, der Div sollte die verbleibende Höhe einnehmen?
Mr_Green
@ Mr_Green ja! verbleibende Höhe.
Bhojendra Rauniyar
@ C-Link verbleibende Höhe der Seite oder verbleibende Bildlaufhöhe innerhalb der Seite?
Mr_Green

Antworten:

62

Sie sollten dies tun können, wenn Sie ein div ( #headerunten) hinzufügen , um Ihren Inhalt von 1 zu verpacken.

  1. Wenn Sie schweben #header, wird der Inhalt von #someidgezwungen, um ihn herum zu fließen.

  2. Als nächstes setzen Sie die #headerBreite auf 100%. Dadurch wird es erweitert, um die Breite des enthaltenen div zu füllen #full. Dadurch wird der gesamte #someidInhalt effektiv nach unten #headerverschoben, da kein Platz mehr um die Seiten herum fließt.

  3. Stellen Sie schließlich die #someidHöhe auf 100% ein, um die gleiche Höhe wie zu erreichen #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Aktualisieren

Ich denke, es ist erwähnenswert, dass Flexbox heutzutage in modernen Browsern gut unterstützt wird. Das CSS könnte geändert werden und ist #fullzu einem Flex-Container geworden. Sollte #someiddas Flex-Wachstum auf einen Wert größer als eingestellt werden 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}
thgaskell
quelle
Bitte sehen Sie meine ** Demo und korrigieren Sie sie, wo ein Fehler vorliegt.
Bhojendra Rauniyar
Ich denke, Sie haben Recht, aber mein Problem konnte nicht gelöst werden, aber das hat mir trotzdem geholfen, das zu verstehen. Also akzeptiere ich deine Antwort.
Bhojendra Rauniyar
Ihre Antwort funktioniert wunderbar, aber ich bin etwas verwirrt darüber, warum es funktioniert: Wenn Sie mit den Hintergrundfarben spielen, können Sie sehen, dass #someiddies #fulltrotz der Höhe von IMMER der Höhe von entspricht #header. Logischerweise sollte der Inhalt von #someidoben beginnen #full. Warum wird #headerder Inhalt nach unten gedrückt?
Hunter S
3
Das Problem dabei ist, dass es #someiddie gleiche Höhe wie macht #full, also um die Höhe von #someidüberläuft . Es wird nicht auf 100% des verbleibenden Speicherplatzes festgelegt. Wenn Sie setzen auf würden Sie das Problem sehen. #full#header#someidoverflow: scroll;#someid
Old Pro
3
Ja, diese Antwort sollte aktualisiert werden. Es war ein Hack, der die Tatsache missbrauchte, dass Float Inhalte nach unten drückte, was zu der Zeit "gut genug" war, wenn es um Browser ging, die Dinge wie nicht unterstützten, calcund flexboxLayouts nicht allgemein unterstützt wurden. Schauen Sie, wie weit wir in weniger als 3 Jahren gekommen sind!
Thgaskell
11

Um eine divHöhe von bis zu 100% auf einer Seite zu erreichen, müssen Sie jedes Objekt in der Hierarchie über dem div ebenfalls auf 100% setzen. zum Beispiel:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

Obwohl ich Ihre Frage nicht vollständig verstehen kann, gehe ich davon aus, dass Sie dies meinen.

Dies ist das Beispiel, an dem ich arbeite:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style ist nur ein Ersatz für das CSS, das ich nicht ausgelagert habe.

Serdalis
quelle
Welches Element möchten Sie 100% hoch sein? und in Bezug auf was?
Serdalis
(2) sollte 100% hoch sein. Ihre Methode funktioniert möglicherweise ohne Wrapper, aber ich verwende einen Wrapper.
Bhojendra Rauniyar
Wenn Sie someidauch 100% sein möchten , müssen Sie 100% hinzufügen und den Container ebenfalls auf 100% setzen. Ich habe meine Frage bearbeitet, um dies zu zeigen.
Serdalis
Ich habe bereits gesagt, dass es möglicherweise nicht funktioniert, da ich einen Wrapper verwende und ihn dann auf 100% setze. Funktioniert auch nicht.
Bhojendra Rauniyar
Versuchen Sie das Beispiel, das ich gepostet habe. Möglicherweise fehlt Ihnen etwas in der Hierarchie, das es vermasselt.
Serdalis
5

Dies kann mit Tabellen erfolgen:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Wenden Sie dann CSS an, damit etwas den verbleibenden Raum ausfüllt:

#someid {
    height: 100%;
}

Jetzt kann ich nur noch die wütenden Rufe aus der Menge hören: "Oh nein, er benutzt Tische! Füttere ihn den Löwen!" Bitte hör mir zu.

Im Gegensatz zu der akzeptierten Antwort, die nichts anderes bewirkt, als den Container auf die volle Höhe der Seite zu verteilen, füllt Div # 2 bei dieser Lösung den verbleibenden Platz, wie in der Frage gefordert. Wenn Sie dieses zweite Div benötigen, um die ihm zugewiesene volle Höhe auszufüllen, ist dies derzeit die einzige Möglichkeit, dies zu tun.

Aber zögern Sie nicht, mir das Gegenteil zu beweisen! CSS ist immer besser.

Jonathan Graef
quelle
4 

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }
    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>
Erweitern Sie das Snippet

Ernesto Hegi
quelle
Könnten Sie bitte etwas näher auf diese Nur-Code-Antwort eingehen? Vielen Dank!
Arkascha
Hallo @arkascha, ich habe gerade meinen Beitrag mit einem funktionierenden Codebeispiel aktualisiert. Danke für den Vorschlag. Prost.
Ernesto Hegi
1

Ich weiß, dass dies ein verspäteter Eintrag ist, aber selbst im Jahr 2016 bin ich überrascht über den völligen Mangel an IE-Unterstützung für Flex (derzeit ist 11 die einzige, die dies unterstützt, und es ist größtenteils fehlerhaft unter http://caniuse.com/#feat=) flexbox ) was aus geschäftlicher Sicht nicht so toll ist! Also denke ich, bis der IE heruntergefahren ist, muss die beste und browserübergreifendste Lösung sicherlich eine JS / Jquery sein?

Die meisten Websites verwenden bereits Jquery und ein sehr einfaches Beispiel (für meinen Code) ist:

$('#auto_height_item').height($(window).height() - $('#header').height());

Sie können natürlich Fenster und Kopfzeile ersetzen und die grundlegende Mathematik die Arbeit machen lassen. Persönlich bin ich immer noch nicht von Flex überzeugt ...

Ukuser32
quelle
0

Ich habe dies für zu kurze Seiten hinzugefügt.

html:

<section id="secondary-foot"></section>

CSS:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}
user4533280
quelle
Ich habe dies in @ BhojendraNepals JSFiddle versucht, konnte es aber nicht zum Laufen bringen. Könnten Sie in Ihrer eigenen JSFiddle anzeigen oder beschreiben, wo Sie Ihr Element hinzugefügt haben?
Dag Høidahl
0

Erstellen Sie ein Div, das beide Divs (full und someid) enthält, und stellen Sie die Höhe dieses Divs auf Folgendes ein:

Höhe: 100vh;

Die Höhe der enthaltenen Divs (full und someid) sollte auf "auto" eingestellt sein. Das ist alles.

HA
quelle
0

Ich weiß, dass dies eine alte Frage ist, aber heutzutage gibt es eine supereinfache Form, nämlich CCS Grid. Lassen Sie mich die Divs als Beispiel nennen:

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

dann der CSS-Code:

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

Und das war's, die zweite Reihe, Scilicet, die Seite, wird aufgrund der Eigenschaft 1fr den Rest der Höhe einnehmen, und die erste Div wird eine Min. Von 100px und eine Maximal von allem haben, was sie benötigt.

Ich muss sagen, dass CSS viel Fortschritte gemacht hat, um Programmierern das Leben zu erleichtern.

Juan Joya
quelle