1

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

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

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

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

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

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

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

谢谢你的帮助，迈克尔：）

4

3 回答 3

1

摆脱

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

并添加：

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

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

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

例子

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

于 2013-03-02T01:33:23.060 回答
0

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

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

#sidebar-wrapper {
   float: right; 
}
#sidebar {
    width: 270px;
    margin-top: -125px;
    position: relative;
    background-color: #282828;
    margin-right: 20px;
    padding-bottom: 25px;
}
于 2013-03-02T01:40:55.613 回答
0

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

于 2013-03-02T01:50:50.567 回答