divを4つに分割する方法は？ここ

Question

は私のコードです：

私はそれをどのように操作を行うことができます。

.menu_box{ 
 
    background-color: whitesmoke; 
 
    margin: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    border-radius: 3px; 
 
    width: 70vh; 
 
    height: 60vh; 
 
} 
 
.menu_box_header{ 
 
    height: 45px; 
 
    background-color: #f1f1f1; 
 
    border-bottom: 1px solid #e1e1e1; 
 
    position: relative; 
 
    top: 0; 
 
    margin-bottom: 10px; 
 
} 
 
.menu_options{ 
 
    border: 1px solid #e1e1e1; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="menu_box"> 
 
    <div class="menu_box_header"> 
 
    </div> 
 
    <div class="menu_options col-xs-6">part1</div> 
 
    <div class="menu_options col-xs-6">part2</div> 
 
    <div class="menu_options col-xs-6">part3</div> 
 
    <div class="menu_options col-xs-6">part4</div> 
 
</div>

そしてここでは、期待される結果ですか？

あなたはフレキシボックスのアプローチを使用することができます

Answer 1

- 私は、内側容器を追加しました下のボックスは私が正しくあなたを理解している場合、あなたはあなたをラップすることができ、動的に

.menu_box { 
 
    background-color: whitesmoke; 
 
    margin: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    border-radius: 3px; 
 
    width: 70vh; 
 
    height: 60vh; 
 
    display: flex; 
 
    flex-direction: column; /* stack inner boxes vertically */ 
 
} 
 

 
.menu_box_body { 
 
    flex-grow: 1; /* make this flex so 4 boxes will fill it equally */ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    width:100%; 
 
} 
 

 
.menu_box_header { 
 
    height: 45px; 
 
    background-color: #f1f1f1; 
 
    border-bottom: 1px solid #e1e1e1; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
} 
 

 
.menu_options { 
 
    border: 1px solid #e1e1e1; 
 
    display:flex;    /* use flex for centring */ 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="menu_box"> 
 
    <div class="menu_box_header"> 
 
    </div> 
 
    <div class="menu_box_body"> 
 
    <div class="menu_options col-xs-6">part1</div> 
 
    <div class="menu_options col-xs-6">part2</div> 
 
    <div class="menu_options col-xs-6">part3</div> 
 
    <div class="menu_options col-xs-6">part4</div> 
 
    </div> 
 
</div>

Answer 2

残りのスペースを埋めますように（標準ブートストラップ）、列のスタイルはdisplay:flex;flex-wrap:wrapで、height:calc(100% - 55px)の場合は55px = 45px（ヘッダーの高さ）+ 10px（ヘッダーの余白 - 下）を追加します。そして、あなたは

.menu_box { 
 
    background-color: whitesmoke; 
 
    margin: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    border-radius: 3px; 
 
    width: 70vh; 
 
    height: 60vh; 
 
    
 
} 
 
.row-eq-height{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height:calc(100% - 55px) 
 
} 
 
.menu_box_header { 
 
    height: 45px; 
 
    background-color: #f1f1f1; 
 
    border-bottom: 1px solid #e1e1e1; 
 
    position: relative; 
 
    top: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
.menu_options { 
 
    border: 1px solid #e1e1e1; 
 
    text-align: center; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="menu_box"> 
 
    <div class="menu_box_header"> 
 
    header 
 
    </div> 
 
    <div class="row-eq-height"> 
 

 

 
    <div class="menu_options col-xs-6">part1</div> 
 
    <div class="menu_options col-xs-6">part2</div> 
 
    <div class="menu_options col-xs-6">part3</div> 
 
    <div class="menu_options col-xs-6">part4</div> 
 
    </div> 
 
</div>