如何讓側邊欄與頁腳對齊？

我的側邊欄有問題。我現在編碼的設計有側邊欄與網站的標題略有重疊 - 故意。但是，問題是我可能會使用錯誤的方法來做到這一點。如何讓側邊欄與頁腳對齊？

的側邊欄應該是排隊與頁腳，但因爲我使用：

#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

如何讓側邊欄與頁腳對齊？

回答

相關問題