Margin Top 100% - Höhe der Mutter Div

Question

Ich habe folgendes Layout zu bauen:

Grundsätzlich, ich brauche drei divs unterschiedliche Höhe mit Kopfhöhen variieren zu 100% von der Spitze positioniert werden des übergeordneten Elements abzüglich der Höhe des Headers. Ich könnte dies mit jQuery machen, aber dies ist eine responsive Website, also möchte ich sie so CSS-basiert wie möglich halten (sonst muss ich mich mit $(window).resize() befassen, was meiner Erfahrung nach unzuverlässig sein kann).

Ist dies möglich, vielleicht mit der CSS3 calc Funktion?

Danke.

Answer 1

So können Sie versuchen, Inhalt (orange-Container) nach unten aus dem blauen Behälter kleben hinzufügen (abhängig von Ihrer HTML-Struktur Sie position: absolute oder margin-top in orange Behältern verwenden) .

Dann können Sie den Header (grün) Container in den orangefarbenen Container setzen und die Position absolut oben -100% setzen (orange Position muss absolute oder relatve sein).

Wenn Sie Ihren HTML-Code hinzufügen, dann wird es einfacher sein, eine genauere Lösung zu finden.

JSFIDDLE with an example

CSS:

.box{ 
    background: #f00; 
    height: 150px; 
    width: 100%; 
    position: relative; 
    padding: 20px; 
    padding-bottom: 0; 
} 
.column{ 
    background: #0f0; 
    width: 30%; 
    position: relative; 
    top: 100% 
} 
.header{ 
    position: absolute; 
    bottom: 100%; 
    width: 100%; 
    background: #00f; 
} 

HTML:

<div class="box"> 
    <div class="column"> 
     <div class="header"> 
      header 
     </div> 
     aaaaaaa<br/> 
     aaaaaa 
    </div>  
</div> 

Answer 2

Versuchen Sie, die folgende CSS-Regel: height: calc(100% - header_height);

Answer 3

ich diese Lösung haben (funktioniert für eine beliebige Anzahl von Spalten, solange sie passen):

1. Verwenden Sie Inline-Blöcke zum Zentrieren von a Lign die Ergebnisse
2. Verwenden Sie die relative Positionierung, um die Blöcke mit der Unterseite der blauen Box auszurichten (erfordert obere vertikale Ausrichtung)
3. Verschieben Sie die grünen Blöcke aus dem Fluss, indem Sie sie absolute Position (das Orange Feld in der Strömung, die verlässt steht im Einklang mit der Unterseite des blauen Kasten)

body { 
 
    font: medium monospace; 
 
} 
 
.blue { 
 
    background: #AAF; 
 
    height: 12em; 
 
    text-align: center; 
 
} 
 
.helper { 
 
    display: inline-block; 
 
    width: 10em; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 100%; 
 
} 
 
.green { 
 
    background: #CFC; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.orange { 
 
    background: #FCA; 
 
}

<div class="blue"> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1<br/>2<br/>3 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4<br/>5 
 
    </div> 
 
    </div> 
 
    <div class="helper"> 
 
    <div class="green"> 
 
     1 
 
    </div> 
 
    <div class="orange"> 
 
     1<br/>2<br/>3<br/>4 
 
    </div> 
 
    </div> 
 
</div>