wake-up-neo.com

Wie fülle ich 100% der Resthöhe?

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

Der oben gezeigte Inhalt von (1) ist unbekannt, da er bei dynamisch generierten Seiten zu- oder abnehmen kann. Das zweite div (2) sollte, wie oben gezeigt, den verbleibenden Platz ausfüllen.

hier ist ein Beispiel meiner 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.

68

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

  1. Wenn Sie #header schweben, wird der Inhalt von #someid umflossen.

  2. Als Nächstes setzen Sie die Breite von #header auf 100%. Dadurch wird es erweitert, um die Breite des übergebenen Divs #full zu füllen. Dadurch wird der gesamte Inhalt von #someid unter #header verschoben, da an den Seiten kein Platz mehr vorhanden ist.

  3. Setzen Sie schließlich die Höhe von #someid auf 100%. Dadurch wird die Höhe von #full gleich.

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

Update

Ich denke, es ist erwähnenswert, dass Flexbox heutzutage von modernen Browsern gut unterstützt wird. Das CSS könnte geändert werden, wenn aus #full ein flexibler Container wurde und #someid den Flex größer als 0 setzen sollte.

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

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

#someid {
  flex-grow: 1;
}
55
thgaskell

Um eine div-Höhe von 100% auf einer Seite zu erhalten, 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 das 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 externalisiert habe.

8
Serdalis

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, um die verbleibende Leerstelle mit someid auszufüllen:

#someid {
    height: 100%;
}

Jetzt höre ich einfach die wütenden Schreie aus der Menge: "Oh nein, er benutzt Tische! Füttere ihn den Löwen!" Bitte hör mir zu.

Im Gegensatz zu der akzeptierten Antwort, die nichts bewirkt, außer dass der Container div über die gesamte Seitenhöhe gesetzt wird, bewirkt diese Lösung, dass div # 2 den verbleibenden Platz wie in der Frage angefordert auffüllt. Wenn Sie das zweite Div benötigen, um die ihm zugewiesene volle Höhe auszufüllen, ist dies derzeit die einzige Möglichkeit.

Aber beweisen Sie mich natürlich falsch! CSS ist immer besser.

5
Jonathan Graef

    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>

4
Ernesto Hegi

Ich weiß, dass dies ein verspäteter Einstieg ist, aber selbst im Jahr 2016 bin ich überrascht über das völlige Fehlen von IE Unterstützung für Flex (derzeit ist 11 der einzige, der dies unterstützt, und es ist hauptsächlich fehlerhaft). http://caniuse.com/#feat=flexbox ) was aus betriebswirtschaftlicher Sicht nicht so toll ist! Also denke ich bis IE) die beste Lösung heruntergefahren ist und die meisten kreuzen -browserfreundlich muss man doch wohl ein JS/JQuery sein?

Die meisten Sites 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 erledigen lassen. Ich persönlich bin immer noch nicht von Flex überzeugt ...

1
Ukuser32

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%;
}
0
user4533280

Erstellen Sie ein div, das beide divs (full und someid) enthält, und setzen Sie die Höhe des div auf Folgendes:

höhe: 100 Vh;

Die Höhe der enthaltenden Divs (full und someid) sollte auf "auto" gesetzt werden. Das ist alles.

0
H.A.

Ich weiß, dass dies eine alte Frage ist, aber heutzutage gibt es eine super einfache Form, die CCS Grid ist, also 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 den 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 es auch schon, die zweite Reihe, Scilicet, die Someide, wird den Rest der Höhe aufgrund der Eigenschaft 1fr einnehmen, und die erste Div wird eine Min von 100px und eine Max von dem haben, was sie benötigt.

Ich muss sagen, CSS hat sich sehr weiterentwickelt, um Programmierern das Leben zu erleichtern.

0
Juan Joya