sticky-footer - 使用纯 CSS 的带有粘性页脚的两个全高列布局

Question

我正在挣扎，这似乎是一个相当简单的挑战。

我需要设计简单的布局，要求是：

• 纯 CSS（没有 flex-box，没有网格，只有 CSS - 没有库）
  
• 固定正文/包装宽度（1024px，居中）
  
• 固定列宽
  
• 列拉伸 100% 高度，即使没有内容
  
• 粘性页脚（附在底部）
  
• 表格不能使用

我在这里遇到了很多关于堆栈溢出的答案，但似乎没有什么能像我想要的那样完全有效。这是方案：

Answer 1

尝试添加position: relative到页脚的父元素。position: absolute需要这个作为参考点。

Answer 2

这是我到目前为止提出的：

body {
  height: 100%;
  background-color: #FFF;
}

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  height: 100%;
  width: 1024px;
  background-color: #000000;
}

.header {
  padding: 10px;
  background-color: #33cc33;
  height: 100px;
}

.col-left {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 300px;
  background-color: #ff0066;
}

.col-right {
  padding: 10px;
  float: left;
  height: calc(100vh - 174px);
  width: 684px;
  background-color: #0066ff;
}

.footer {
  padding: 10px;
  background-color: #99ff33;
  height: 50px;
  position: absolute;
  bottom: 0;
  width: 1004px;
}

<div class="wrapper">
  <div class="header">
    <p>test</p>
  </div>
  <div class="col-left">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
  <div class="col-right">
    <p>test</p>
  </div>
  <div class="footer">
    <p>test</p>
  </div>
</div>

JSFiddle上的代码：

https://jsfiddle.net/adorek/8kecq9pw/22/