Zwei Reihen Layout mit nur CSS

Question

Ich brauche ein 2 Zeilen Layout für eine Web-Seite erstellen einen Abschnitt für Filter und anderen Abschnitt für die Ergebnisse mit den folgenden Eigenschaften zu verwalten:

• die Seite mit der Höhe nicht überlaufen kann von 100%
• Die Höhe der ersten Zeile basiert auf seinem Inhalt (könnte variabel sein und eine JavaScript-Funktion kann es durch das Verstecken einiger Elemente verändern)
• Die Höhe der zweiten Zeile ist der Unterschied zwischen 100% und der Höhe der ersten Reihe
• in t er Reihe Sekunde, um die div mit Überlauf muss derjenige mit Klasse „Liste“ und ich kann es nicht mit class = „Ergebnis“ div bewegen (das wird es funktioniert)

HTML:

<div class="main"> 
    <div class="filter"> 
     <div class="filtercontent"> 
      filter content 
     </div> 
    </div> 
    <div class="result"> 
     <div class="resultcontent"> 
      <div class="list"> 
       <div class="listcontent"> 
        list content  
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.main { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.filter { 
    width: 100%; 
} 

.result { 
    width: 100%; 
} 

.resultcontent { 
    height: 100%; 
    width: 100%; 
} 

.list { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 

.listcontent { 
    height: 1000px; 
    width: 2000px; 
} 

ich habe versucht, mit Flexbox (auf unterschiedliche Weise), aber ich kann keine Lösung für den letzten Punkt finden.

WICHTIG: Ich kann Javascript nicht verwenden, um die Höhe der Zeilen festzulegen. Ich brauche eine Lösung, die nur CSS verwendet.

Danke!

Answer 1

Wenn Sie Ihr .result div mit der Eigenschaft "flex: 1" deklarieren, wird der gesamte verbleibende Platz im äußeren div (.main) benötigt. Wenn also das .filter div 500 Pixel in der Höhe einnimmt, wird das .result im Leerraum angepasst und füllt die 100% vom Elternteil. Wenn Sie es dynamisch ändern, indem Sie Elemente ausblenden oder hinzufügen, wird flex: 1 sicherstellen, dass der gesamte verbleibende Speicherplatz automatisch von .result aufgefüllt wird.

Hoffe es hilft