Question

我的侧边栏有问题。我正在编码的设计现在侧边栏略微重叠了网站的标题 - 故意。但问题是，我可能会使用错误的方法来完成它。

侧边栏应该与页脚对齐，但是因为我正在使用：

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

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

当添加内容时会出现另一个问题，侧边栏会自动将所有侧边栏内容与主要内容一起显示，但侧边栏框架将保留在同一位置。

如果您想查看它，我已将该页面包含在codepen中。

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

谢谢你的帮助，Michael：）

Answer 1

摆脱

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

并添加：

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

然后在结束父<aside>之前清除浮动的</div> 右 ...添加：

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

Example

这将更加符合浏览器和<aside>与<footer>

的对齐

Answer 2

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

尝试将包装父级浮动到右侧，然后为#sidebar元素提供负上边距。

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

Answer 3

margin-top: -125px;代替bottom: 125px;

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

3 个答案: