ブートストラップ3でその要素の一番下まで塗りつぶす方法は？

Question

私は2つの要素を有するコンテナ要素を有する：

• COL-MD-8
• B COL-MD-4
• C COL-MD-4であります

ここで、Aはコンテナ要素を拡張するために長くなりました。

私は、Aの高さがBの高さ+ Cの高さ（マージンを含む）になるように、残りのスペースを塗りつぶしたいと思います。

ブートストラップでどうすればいいですか？

Answer 1

CSS Flexboxを試してみてください。これは、ブートストラップクラスを使用してこれを達成するために整頓することになります。

.section { 
 
    display: flex; 
 
    font-size: 30px; 
 
    color: #fff; 
 
} 
 

 
.sec-item { 
 
    flex: 1; 
 
} 
 

 
.left-section { 
 
    background: blue; 
 
    height: 100vh; 
 
    flex: 8; 
 
} 
 

 
.right-section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 4; 
 
} 
 

 
.right-section .top { 
 
    background: red; 
 
    flex: 1; 
 
} 
 

 
.right-section .bottom { 
 
    background: green; 
 
    flex: 1; 
 
}

<div class="section"> 
 
    <div class="sec-item left-section">A</div> 
 
    <div class="sec-item right-section"> 
 
    <div class="top">B</div> 
 
    <div class="bottom">C</div> 
 
    </div> 
 
</div>

・ホープ、このことができます：

は、以下のスニペットを見てください！

Answer 2

このようなものを試してみてください。これは、Flex-プロパティを使用しています

*{ 
 
    box-sizing:border-box; 
 
} 
 
.row{ 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 
#leftDiv{ 
 
    height:400px; 
 
    border:2px solid black; 
 
} 
 
#rightDiv{ 
 
    border:2px solid black; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
.redOne{ 
 
    background-color:red; 
 
    height:100px; 
 
    flex-shrink:0; 
 
} 
 
.greenOne{ 
 
    background-color:green; 
 
    flex-shrink:0; 
 
    flex-grow:1; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-6 col-xs-6" id="leftDiv"> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6 col-xs-6" id="rightDiv"> 
 
     <div class="redOne"></div> 
 
     <div class="greenOne"></div> 
 
    </div> 
 
</div>