響應式兩列布局

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