zuweisen 100% Höhe für div in einem div mit dynamischer Höhe

Question

Ich versuche, die Höhe eines div auf 100% seiner Eltern zu setzen.

Die Band auf der linken Seite sieht gut aus, aber wenn Sie feststellen, nach unten scrollen, dass es nur so hoch wie im Browser-Fenster ist. Es soll die volle Höhe seiner Eltern haben.

Der Inhalt Div schien auch das gleiche Problem, wie Sie durch das Hintergrundbild erkennen können, wenn Sie nach unten scrollen. Um das zu beheben, könnte ich die Eigenschaft height: 100% des Inhalts div entfernen, aber in diesem Fall funktioniert auch der Streifen links nicht mehr, da die Höhe 100% erfordert, dass der Elternteil eine Höhe definiert.

Ich bemerkte, dass das Zurb Foundation Framework, das ich verwende, die Höhe des Körpers und html auf 100% setzt, also überschrieb ich diese Eigenschaft auf html, Körperhöhe = auto, da ich dachte, dass dies das Problem beheben könnte. Wenn ich dann die Eigenschaft height = 100% aus meinem Inhalts-div entferne, skaliert es ordnungsgemäß mit allen Ergebniselementen auf der rechten Seite und hat die richtige Höhe. Aber in diesem Fall kann ich meinem Suchdiv auf der linken Seite keine 100% Höhe zuweisen. Wie kann ich dieses Problem beheben?

Mein Code, wie es jetzt ist:

#search-column { 
    float: left; 
    margin-left: 6%; 
    margin-right: 6%; 
    width: 24%; 
    background-color: rgba(255, 255, 255, .85); 
    height: 100% !important; 
} 
#content { 
    background-image: url("../images/bg.jpg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin: 0; 
    padding-bottom: 20px; 
    height: auto; 
} 
html, 
body { 
    height: auto; 
} 

Wenn ich die Höhe automatisch aus der HTML-und Körper zu entfernen, wird ihre Höhe die Höhe des Browserfensters sein, wie im Rahmen festgelegt. Dadurch wird das Design des Inhalts-Divs gebrochen, das höher sein sollte als der Browser, falls rechts viele Suchergebnis-Divs vorhanden sind.

Ich könnte es wahrscheinlich mit dieser Höhe und einer festen Position arbeiten, aber ich freue mich, den Inhalt des Such-Div später reibungslos zu scrollen, so ist es wichtig, dass das Such-Band auf der linken Seite die volle Höhe hat der Inhalt (etwa 2000 px in diesem Fall)

Answer 1

Versuch zu ändern:

html, body{ height: 100%;} 

Es Seite zwingen alle möglichen Höhe

---

zu verwenden

Und fügen Sie diesen Code:

#search-column{ 
    min-height: 100%; 
    max-height:100%; 
} 

Es zwingen wird, nur 100% der Höhe