CSS - Leere farbige Container relativ zur Größe des übergeordneten Containers

Question

Ich habe eine Kopfzeile auf meiner Webseite, die die Höhe basierend auf dem Ansichtsfenster (zB 15vh) ändert und eine Mindesthöhe von 50px hat.

Ich möchte ein farbiges Quadrat innerhalb dieser Kopfzeile machen, die immer genau 50% der Höhe der Kopfzeile ist, unabhängig vom Ansichtsfenster des Benutzers. Es wird keinen Inhalt in der farbigen Box geben. Es ist nur für Stilzwecke. Ich weiß, dass ich Höhe nicht verwenden kann: 15%; Da im Container kein Inhalt vorhanden ist, wird nichts angezeigt. Ich kann die Box nicht in Einheiten von Viewport-Einheiten definieren, da die Kopfzeile nicht immer 15% der Höhe des Viewports (aufgrund der Min-Höhe-Zuweisung) ist.

Gibt es eine Möglichkeit, dies mit CSS zu erreichen?

Hier ist mein Setup:

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.header { 
 
    position: relative; 
 
    background-color: grey; 
 
    border-bottom: 1px solid #CCC; 
 
    min-height: 50px; 
 
} 
 

 
.responsivecontainer { 
 
    float: left; 
 
    max-width: 20vw; 
 
    min-height: 50px; 
 
    display: flex; 
 
} 
 

 
.logo { 
 
    margin: auto 0; 
 
} 
 

 
.clearfix:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
.box { 
 
    float: left; 
 
    height: 50%; 
 
    background-color: black; 
 
} 
 

 
.clearfix { 
 
    display: inline-block; 
 
} 
 

 

 
/* Hides from IE-mac \*/ 
 

 
* html .clearfix { 
 
    height: 1%; 
 
} 
 

 
.clearfix { 
 
    display: block; 
 
} 
 

 

 
/* End hide from IE-mac */ 
 

 

 
/* @end */

<div class="header clearfix"> 
 

 
    <div class="responsivecontainer"> 
 
    <div class="logo"> 
 
     <img src="http://www.bluebean.ca/logo1.jpg"> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="box"> 
 
    <img src="http://www.bluebean.ca/grey.jpg"> 
 
    </div> 
 

 
</div>

Answer 1

Sie können dies mit absoluter Positionierung. Wie folgt aus:

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.header { 
 
    position: relative; 
 
    background-color: grey; 
 
    border-bottom: 1px solid #CCC; 
 
    min-height: 50px; 
 
    position: relative; 
 
} 
 

 
.responsivecontainer { 
 
    float: left; 
 
    max-width: 20vw; 
 
    min-height: 50px; 
 
    display: flex; 
 
} 
 

 
.logo { 
 
    margin: auto 0; 
 
    z-index:10; 
 
} 
 

 
.clearfix:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 

 
.box { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height: 50%; 
 
    background-color: black; 
 
    width: 100%; 
 
}

<div class="header clearfix"> 
 
    <div class="box"></div> 
 
    <div class="responsivecontainer"> 
 
    <div class="logo"> 
 
     <img src="http://www.bluebean.ca/logo1.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Sie müssen auch z-index Wert größer eingestellt ist als der Box-Box in Header unter Elemente zu halten.