Question

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

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

我已经尝试了几种方法，但我还没有找到一个好的解决方案，有人可以帮助我吗？：）

这是项目的CODEPEN。

迈克尔

Answer 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中，侧边栏只会与“maincontent”DIV一样高

第2部分：

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

忘掉侧栏：身高：16000px;

你需要填充底部：5000px和margin-bottom：-5000px; //或者你想要的任何值，只需记住margin-bottom必须与padding-bottom相同，但负数除外

Answer 2

你应该给出一个常见的类，并使用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>

无论内容多少，如何让我的侧边栏与页脚对齐？

2 个答案: