全高布局，页眉、页脚、侧边栏和内容分为 4 个相等的框

Question

我正在尝试做如下图所示的布局：

全屏，页眉和页脚固定高度（60px），绿色边栏为200px宽；侧边栏和右侧的部分都占据了 y 轴整个可用空间space。

对于宽屏，我想将右侧分成4个相等的框，2乘2显示。

对于中小屏幕（< 768px），我想把4个等号的方框1×4显示出来，如下图：

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
}

#wrapper {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 60px 0;
  position: relative;  
}

#header {
  width: 100%;
  height: 60px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height:100%;
  background: gray;
  display: flex;
}

#left {
  background: green;
  width: 200px;
  flex: 0 0 200px;
}

#right {
  background: red;
  width: 100%;
  position: relative;
}

#footer {
  width: 100%;
  height: 60px;
  background: #171717;
  bottom: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div id="left"></div>
    <div id="right">
        <div class="red_box"></div>
        <div class="red_box"></div>
        <div class="red_box"></div>
        <div class="red_box"></div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

如何设置这些红色框的样式以实现 2 种布局，如果可能的话，不使用 display:table 和 display:table-cell，因为这将在 Firefox 上将项目绝对定位在红色框内会产生问题吗？

Answer 1

A 找到了解决方案。这是：

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
  color: white;
  font-family: Arial, sans-serif;
}

body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  padding: 60px 0;
  position: relative;
}

#header {
  width: 100%;
  height: 60px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  height: 100%;
  display: flex;
}

#left {
  background: green;
  width: 200px;
  flex: 0 0 200px;
}

#right {
  background: blue;
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.red_box {
  flex: 0 0 50%;
  background: red;
  border: 1px solid #111;
  border-bottom: none;
  text-align: center;
}

#footer {
  width: 100%;
  height: 60px;
  background: #171717;
  bottom: 0;
  left: 0;
}

@media (max-width: 768px) {
  .red_box {
    flex: 0 0 100%;
  }
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div id="left"></div>
    <div id="right">
      <div class="red_box">1</div>
      <div class="red_box">2</div>
      <div class="red_box">3</div>
      <div class="red_box">4</div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

全高布局，页眉、页脚、侧边栏和内容分为 4 个相等的框

Full height layout with Header, footer, sidebar and content divided into 4 equal boxes

html

css

multiple-columns