如何使侧边栏与页脚对齐？答案

【问题标题】：How to make sidebar line up with footer?如何使侧边栏与页脚对齐？
【发布时间】：2013-02-16 15:45:36
【问题描述】：

我的边栏有问题。我现在正在编写的设计中，侧边栏与网站的标题略微重叠——这是故意的。但问题是我可能会使用错误的方法来做到这一点。

侧边栏应该与页脚对齐，但由于我使用的是：

#sidebar {
    width: 270px;
    position: relative;
    left: 690px;
    bottom: 125px;

如果我不使用这些行，侧边栏会匹配，但我找不到任何其他方法。

添加内容时会出现另一个问题，侧边栏会自动将所有侧边栏内容与主要内容一起下降，尽管侧边栏框架将保持在同一位置。

如果您想看一下，我已将页面包含在 codepen 中。

http://codepen.io/anon/pen/BxpJa

感谢您的帮助，迈克尔 :)

【问题讨论】：

标签： html css positioning footer sidebar

【解决方案1】：

摆脱

position: relative;
left: 690px;
bottom: 125px;

并添加：

float: right;
margin-top: -65px; /* adjust to your needs */

然后清除关闭父</div>之前的浮动<aside>对 ...添加：

<br style="clear: right;" />

Example

这将在浏览器之间更加一致，<aside> 与 <footer> 对齐

【讨论】：

【解决方案2】：

侧边栏不与页脚对齐的原因（我想你的意思是页脚直接位于侧边栏下方，没有额外的间距）是因为您将侧边栏相对于其父容器定位。因此侧边栏的高度仍然和以前一样，并且不会考虑到它应该更高，因为您已经将它向上移动了。

尝试将包装父级浮动到右侧，然后给 #sidebar 元素一个负的上边距。

#sidebar-wrapper {
   float: right; 
}
#sidebar {
    width: 270px;
    margin-top: -125px;
    position: relative;
    background-color: #282828;
    margin-right: 20px;
    padding-bottom: 25px;
}

【讨论】：

感谢你们的 cmets，我确实尝试过这种方法，但将其更改为当前方法，因为它给我带来了另一个问题 - 内容包装器也应该与页脚对齐，但无论何时我实施浮动：对；到侧边栏元素，内容包装器在内容之后立即停止。
清除花车的额外标记会让耶稣宝宝哭泣。 nicolasgallagher.com/micro-clearfix-hack
你只需要清除浮动。使用overflow: hidden 或 clearfix 方法。前者可能不起作用，因为您正在消极地扩展上边距。
非常感谢你们的帮助，我已经为这个问题苦苦挣扎了 2 天，不知道是什么问题 :)

【解决方案3】：

margin-top: -125px; 而不是bottom: 125px;

【讨论】：