応答HTMLレイアウトの高さを100％は、親のdiv

Question

に応じていない私は、HTML

で本当に新たなんだこれは、だから私は、行の2列を持っている私のコード

<div class="w3-row"> 
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%"> 
     <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br> 
     To become the best foundation that is able to nurture holistic global leaders</p> 
    </div> 


    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%"> 
     <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br> 
     Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best 
     solution for mankind through Islamic values</p> 
    </div> 
</div> 

です。これは

my first column leaves empty white space below it

100％親のdivの高さに拡張する私の列の両方を持っているどのような方法がありますが何が起こったのですか？

Answer 1

レスポンスレイアウトの問題です。

オレンジの背景色をw3行に追加します。

異なる高さを防止するには、.w3コンテナにいくつかの高さの値を追加する必要があります。

Answer 2

使用は

.w3-row{ 
 
display: flex; 
 
align-items: center; 
 
} 
 

 
.w3-container { 
 
flex: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="w3-row"> 
 
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%"> 
 
     <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br> 
 
     To become the best foundation that is able to nurture holistic global leaders</p> 
 
    </div> 
 

 

 
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%"> 
 
     <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br> 
 
     Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best 
 
     solution for mankind through Islamic values</p> 
 
    </div> 
 
</div>

Answer 3

一つの解決策は@Suprajaが提案のようなフレックスを使用することですが、より簡単な解決策は、代わりに、列のコンテナにオレンジ色のBGを与えることですがフレックス列そのもの。

はそうw3-rowクラスでdivの上.w3-orangeを置く：

<div class="w3-row w3-orange">