1

所以我不久前发布了一个与此类似的问题，但尽管我得到了解决部分问题的帮助，但我意识到我的侧边栏仍然无法按照我的意愿行事。

问题是，截至目前，我有一个侧边栏，我想与我的页脚对齐，但它在“小部件”之后停止。换句话说，我希望侧边栏跟随主要内容一直到页脚，即使侧边栏本身并不总是有足够的内容。

我已经尝试了几种方法来做到这一点，但我还没有找到一个好的解决方案，有人可以帮助我吗？:)

这是该项目的CODEPEN。

迈克尔

4

2 回答 2

1

有一个老派的黑客可以到达你需要的地方。

让我们假设这样的事情：

<div id="container">    //  Give it overflow: hidden;
  <div id="maincontent">
     Your main content goes here  // Assumes this is always taller than sidebar
  </div>
  <div id="sidebar">
     This is your sidebar stuff  // Give it a height of something like height: 16000 px;
  </div>
</div>

<div id="footer">
   This is your footer stuff
</div>

使用此方法，侧边栏将始终是所有内容中最高的，但由于它所在的容器具有溢出：隐藏在 CSS 中，侧边栏将仅与您的“主要内容”DIV 一样高

第2部分：

好的，我发现了我的黑客问题，我忘记了一个重要部分：

忘记侧边栏：高度：16000px；

你需要 padding-bottom: 5000px 和 margin-bottom: -5000px; // 或者你想要的任何值，只要记住 margin-bottom 必须与 padding-bottom 大小相同，除了一个负数

于 2013-03-12T11:02:33.577 回答
0

您应该同时提供一个常见的类，并使用 Equal Heights 等脚本。在此处查看更多信息http://filamentgroup.com/lab/setting_equal_heights_with_jquery/。

编辑：作为一个例子，假设你已经包含了库，并且你的元素（侧边栏和内容容器）都有类eq-height，你需要在你的模板中添加这个块<head>：

<script type="text/javascript">
  $(document).ready(function() {
    $('eq-height').equalHeights();
  });
<script>
于 2013-03-12T10:40:44.703 回答