CSS - 親コンテナのサイズに関連した空のカラーコンテナ

Question

ビューポートに基づいて高さが変更され、最小高さが50pxの私のウェブページにヘッダーがあります。

私は、このヘッダー内に、ユーザーのビューポートに関係なく常にヘッダーの高さのちょうど50％の色付きの四角形を作成したいと考えています。色付きのボックスには内容がありません。それはスタイルの目的のみです。私は高さを使用することができないことを知っている：15％;コンテナ内にコンテンツが存在しないため、何も表示されないためです。ヘッダーはビューポートの高さの15％（最小高さ割り当てのため）ではないため、ビューポート単位でボックスを定義することはできません。

CSSでこれを達成する方法はありますか？

は、ここに私の設定です：

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

あなたは絶対位置でこれを行うことができます。このように：

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>

また、ヘッダ内の要素の下のボックスを保つために箱のそれよりも大きいz-index値を設定する必要があります。