將邊欄固定在頂部而內容滾動

嗨有這樣的設計：

HHHHHHHHHH 
CCCCCCCSSS 
CCCCCCCSSS 
CCCCCCCSSS 
CCCCCCCSSS 
FFFFFFFFFF

H是我的頭，F頁腳，C含量和我的側欄。

我已將我的標題固定在頂部，我的頁腳位於底部，因此無論我有多少內容，頁眉和頁腳始終都會顯示。

由於我的側邊欄只有少量的數據，我也想修復它。我希望側邊欄保持正確的位置，並始終可見，即使內容太大，我需要滾動才能進入頁面底部。

喜有此代碼：

.container { 
    min-height:100%; 
    position:relative; 
} 
.header { 
    position: fixed; 
    top: 0; 
    background:#f1f1f1; 
    width: 100%; 
    margin: 0px auto; 
} 
.sidebar { 
    float: right; 
    width: 300px; 
    background-color: #FFF; 
    padding:10px; 
    padding-bottom: 100px; 
    padding-top: 50px; 
} 
.content { 
    width: 960px; 
    padding:10px; 
    padding-bottom: 100px; 
    padding-top: 50px; 
    margin-left: 100px; 
} 
.footer { 
    position:fixed; 
    bottom:0; 
    width:100%; 
    height:60px; 
    background:#f1f1f1; 
    text-align: center; 
    vertical-align: middle; 
}

任何想法？

來源

2012-12-02 Favolas

你嘗試過'position：fixed'嗎？ –

嗨。是。已經嘗試過，但它與佈局混亂。側邊欄全部向左移動，並保持在頭部的一些標準之上.. – Favolas

嘗試將合適的屬性設置爲0. –

試着讓側邊欄的位置「固定」，並說明其確切位置。所以，你會添加以下到div類「側邊欄」，在你的CSS：

position: fixed; 
left: 1110px; 
top: 30px;

您可以調整頂部和左側位置，以使一切適合你的喜好，但應大致放在側邊欄正確位置。 :)

來源

2012-12-02 05:49:17 user1658560

謝謝。這是一個「小」的黑客，但這符合我的需求:) – Favolas

你應該考慮的另一件事是，如果用戶的屏幕分辨率小於1110px寬，他們根本不會看到側邊欄。您可能想要嘗試更流暢的方法，使用百分比來計算展示位置 - 或者如果您希望展示位置，您應該真正使用「right：」屬性而不是左側。

來源

2012-12-02 07:13:26 Amo

將邊欄固定在頂部而內容滾動

回答

相關問題