javascript - 如何将一个div分成四部分？

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

您可以使用 flexbox 方法 - 我添加了一个内部容器，这样下方的盒子将动态填充剩余空间

.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>