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

问题描述

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

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

• 纯 CSS（没有弹性框，没有网格，只有 CSS - 没有库）
  
• 固定正文/包装宽度（1024 像素，居中）
  
• 固定列宽
  
• 即使没有内容，列也会拉伸 100% 的高度
  
• 粘性页脚（附在底部）
  
• 不能使用标签

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

解决方法

这是我目前想到的：

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/

,

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