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

我的侧边栏有问题。我现在编码的设计有侧边栏与网站的标题略有重叠 - 故意。但是，问题是我可能会使用错误的方法来做到这一点。如何让侧边栏与页脚对齐？

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

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

如果我不使用这些线路的侧边栏比赛，但我找不到任何其他方式来做到这一点。

当内容被添加时，还会出现另一个问题，侧边栏会自动将所有边栏内容与主内容放在一起，尽管边栏框会保留在同一位置。

如果你想看看它，我已经在codepen中包含了该页面。

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

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

来源

2013-03-02 michaelw90

摆脱

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

并添加：

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

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

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

Example

这将是跨浏览器更加一致和<aside>排队与<footer>

来源

2013-03-02 01:33:23 Adrift

之所以栏不排队与脚注（由于我认为你的意思是脚注立即在侧栏下没有额外的间距）是因为你已经定位侧栏相对于其父容器。侧栏的高度因此仍然与以前相同，并且不会考虑到它应该更高，因为您已将它向上移动。

尝试将包装父项移动到右侧，然后给#sidebar元素设置负的顶部边距。

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

来源

2013-03-02 01:40:55 Terry

感谢您的球员的意见，我没有真正尝试这种方法，但它改变了当前的一个，因为它给了我另外一个问题 - 内容，包装也应该对齐与页脚，但每当我实现浮法：正确;内容包装器在内容后立即停止到侧边栏元素。 – michaelw90 2013-03-02 01:59:44

下面是我的意思codepen：http://codepen.io/anon/pen/blmdJ – michaelw90 2013-03-02 02:00:04

清除浮游物的额外标记使宝贝耶稣哭了。 http://nicolasgallagher.com/micro-clearfix-hack/ – cimmanon 2013-03-02 02:12:18

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

来源

2013-03-02 01:50:50

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

回答

相关问题