Berechnen Sie die Höhe der Divs um ein Div-das ist die Höhe basiert auf übergeordneten Breite?

Habe ich eine äußere div mit der folgenden (verkürzt, um nur relevante) CSS-Attribute: 

.container{
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
}

Innen, ich habe drei divs, die oberste mit einführenden text, der in der Mitte halten Inhalt, und der untere für Besucher-Kommentare. In der Mitte wird eine Foto-Diashow, video-Clips, anzeigen etc. So muss ein bestimmtes Seitenverhältnis, angesichts der Breite ist flüssig ich bin mit den folgenden (Probe im Verhältnis 2:1) CSS: 

.videoplayer{
position:absolute;
box-sizing:border-box;
width:calc(100% - 40px);
left:20px;
top:50%;
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
transform:translate(0,-50%);
}

Durch die Verwendung von null-Höhe und die Höhe von % vertikale Polsterung schafft es die Höhe dynamisch basierend auf der Breite des übergeordneten Elements ist, dann top:50%; transform:translate(0,-50%); positionieren Sie es zentral innerhalb des übergeordneten div.

Das problem, das ich habe ist, ich will die divs, die über und unter dieser eine passen Sie den verbleibenden Raum unter-und oberhalb, und ich habe keine Idee, wie das zu berechnen, deren Höhe!

Die Letzte Folge die ich Suche, ist:DIESE

Jemand wissen, ob dies möglich ist (Idealerweise mit reinem CSS) und wenn ja, wie?

Vielen Dank 🙂

Dies ist nicht möglich, mit CSS, da Sie sich effektiv Fragen, wie Stil zwei (eine vorhergehende und eine nachfolgende) Geschwisterkinder der ein bestimmtes element, und CSS hat keine Mittel, mit denen eine frühere Geschwister ausgewählt werden können. Having said that, könnte es möglich sein, mit flex-box, können Sie das entsprechende HTML-Code für diesen Abschnitt?
Der html-Code wie folgt: <DIV class="videocontainer"> <DIV class="videotext"></DIV> <DIV class="videoplayer"></DIV> <DIV class="videocomments"> </DIV> </DIV>

InformationsquelleAutor Neil Schulz | 2015-05-28

  1. 1

    In meinem Fall möchte ich, dass mein Bildschirm sieht aus wie das gleiche in allen pc-desktop-browser, alle mobilen browser, alle Android Smartphones und allen iPhones.

    so habe ich den äußeren div-Höhe auf dem Bildschirm zur Verfügung Höhe. Ich habe 3 innere div, top-div-Höhe = Bildschirmhöhe /14, untere div-Höhe = Bildschirmhöhe /14, Mitte div Height = Bildhöhe * 12 /14

    Ich sowas nie nutzen 20px, da jeder Bildschirm 20px anders ist, verwende ich (Bildschirmhöhe /eine Zahl)px statt

    InformationsquelleAutor Kenneth Li

  2. 1

    Vielen Dank an @David-Thomas für den Hinweis mich in die Richtung des flex-box, mit der ich es geschafft Sie zu Sortieren Sie es aus! Lösung unten in den Fall, jemand anderes hat das gleiche problem.

    .videocontainer{    /* PARENT DIV - FLUID HEIGHT TO FILL VIEWPORT */
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
display:inline-flex;
flex-direction:column;
justify-content:center;
align-content:stretch;
align-items:stretch;
}

.videotext{    /* DIV HEIGHT FLUID TO FILL SPACE ABOVE */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}  

.videoplayer{    /* DIV HEIGHT FIXED RATIO TO WIDTH */
box-sizing:border-box;
width:calc(100% - 40px); 
margin-left:20px;   
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
}

.videocomments{    /* DIV HEIGHT FLUID TO FILL SPACE BELOW */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}

    InformationsquelleAutor Neil Schulz

Schreibe einen Kommentar