css - 响应式两列布局

Question

谷歌中关于“负责任的两列布局”的第一个链接是我想做的事情，但颠倒了（右列的内容）。显然这也是创建列的错误方法，因为包装器并没有真正“包装”。内部 div 是绝对的，而包装器是相对的。这会产生问题，因为如果它们没有充满文本，页脚并不会真正进入两个列的底部。我能做的最好的修正是什么？我也希望这个链接能超过那个链接，否则其他人可能会遇到同样的情况。我意识到在这里链接它会使它更高：/

 .columnsContainer, footer, header { position: relative; margin: .5em; } 
.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   

链接：http ://codepen.io/johnstonian/pen/guhid

Answer 1

您可以对绝对位置执行的操作是将两个列的一些值转换如下：

@media screen and (min-width: 47.5em ) {
  .leftColumn {margin-left: 19.5em;}
.rightColumn{width: 18.75em; position:absolute; left:0; top:0;}
}