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

我正在尝试进行布局，如下图所示：

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

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

对于中、小屏幕（<768px），我想显示4个相等的框1×4，如下图所示：

我拥有的HTML：

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

如果可能的话，在不使用display:table和display:table单元格的情况下，我如何设置这些红色框的样式以实现这两种布局，因为这会导致在Firefox上将项目绝对放置在红色框内的问题

---

谢谢大家!

A找到了解决办法。这是：

html{
身高：100%；
}
身体{
身高：100%；
位置：相对位置；
颜色：白色；
字体系列：Arial，无衬线；
}
正文*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#包装纸{
身高：100%；
填充：60px0；
位置：相对位置；
}
#标题{
宽度：100%；
高度：60px；
背景：#171717；
位置：绝对位置；
排名：0；
左：0；
}
#内容{
身高：100%；
显示器：flex；
}
#左{
背景：绿色；
宽度：200px；
flex:00200px；
}
#对{
背景：蓝色；
宽度：100%；
位置：相对位置；
显示器：flex；
柔性包装：包装；
}
.红盒子{
弹性：0.50%；
背景：红色；
边框：1px实心#111；
边框底部：无；
文本对齐：居中；
}
#页脚{
宽度：100%；
高度：60px；
背景：#171717；
底部：0；
左：0；
}
@介质（最大宽度：768px）{
.红盒子{
弹性：0.100%；
}
}

标题
1.
2.
3.
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;
}