如何将div分为四个部分？

Question

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是预期的结果：

我该怎么做？

Answer 1

你可以使用flexbox方法 - 我添加了一个内部容器，以便下面的框将动态填充剩余的空间

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解正确，您可以将列包装成一行（标准引导程序），并使用display:flex;flex-wrap:wrap设置该行的样式，并将height:calc(100% - 55px)添加到55px = {{1} }（标题的高度）+ 45px（标题的页边距）。你会得到4个高度相等的列

＆＃13;

＆＃13;

10px

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;