創建全長邊框的大負邊距

Question

問題：我想創建一個運行父容器的整個長度的兩個側邊欄，它們被頁腳截斷，並且也是響應式的。

似乎有幾種技術，但目前，我選擇嘗試使用大的負邊距&填充。我從這個例子（http://jsfiddle.net/yJYTT/）

立足我的努力添加以下CSS到右側邊欄（與id="aside_secondary）後：

#aside_secondary { 
float: right; 
width: 17%; 
background-color: #ececec; 
padding: 14px; 
margin-bottom:-8000px; 
padding-bottom:8000px; 
} 

我確實得到類似我想要的效果，但如果你看這裏的結果（http://jsfiddle.net/danieldropik/rjyvR/4/），我有以下問題：

• 淺灰色的右側欄（id="aside_secondary"）超出了深灰色頁腳，時真的，我想深灰色頁腳是非常t的底部他的頁面。 （注：這個問題不在於我使用了refrence（http://jsfiddle.net/yJYTT/）

---

這裏搗鼓發生是照片：

---

Answer 1

我找到一個工作解決方案，首先修改您的CSS爲sidebar_right（刪除填充和邊距）：

#aside_secondary { 
float: right; 
width: 17%; 
background-color: #ececec; 
padding: 14px; 
} 

然後使用jQuery玩，當頁面完成渲染（或者在側邊欄被渲染）推出這樣的：

$("#aside_secondary").css("height", $("#aside_primary").height()); 

這使sidebar_left的高度與sidebar_right。

當你不知道，如果輸入的文本可以反之亦然（右高度大於左側的高度更高），你可以做這樣的事情：

function fix_sidebars_height() { 
    var left_sidebar_height = $("#aside_primary").height(); 
    var right_sidebar_height = $("#aside_secondary").height(); 
    if (left_sidebar_height <= right_sidebar_height) { 
     $("#aside_primary").css("height", right_sidebar_height); 
    } else { 
     $("#aside_secondary").css("height", left_sidebar_height); 
    } 
    } 

    // then call when the render is complete 
    fix_sidebars_height(); 

你應該可以解決與jQuery的高度，因爲較小的側邊欄「不知道」其他的高度（多少內容）。

新增的jsfiddle DEMO