创造全长侧边栏的负利润率较大

Question

问题：我想创建一个运行其父容器整个长度的两个侧边栏，它们被页脚截断，并且也是响应式的。

似乎有几种技术，但目前，我选择尝试使用较大的负边距＆amp;填充。我的努力来自这个例子（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"）延伸到深灰色页脚之外，当我真的想要深灰色页脚在页面的最底部时。 （注意：这个问题不会出现在我用于参考的小提琴中（http://jsfiddle.net/yJYTT/）

---

这是一张照片：

---

Answer 1

我找到了一个有效的解决方案，首先修改sidebar_right的css（删除填充和边距）：

#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