固定左側導航+剩餘空間

我試圖用CSS實現以下內容：我想要一個固定邊欄帶導航，這樣當您向下滾動時，邊欄就會保留在它的位置。剩下的空間應該填滿我的內容，就好像它是100％的身體一樣。固定左側導航+剩餘空間

但是，我的問題是，正確的部分右側多出300px的空間，導致水平滾動條。

我無法自己找出解決方案，有人可以幫我嗎？非常感謝！ :)

nav { 
    height: 100%; 
    width: 300px; 
    position: fixed; 
    z-index:99; 
} 

#wrapper { 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    margin-left:300px; 
}

來源

2014-07-11 Wouter C

如果您在http://jsfiddle.net工作示例 – MightyPork

你的意思是它總是幫助[這樣？]（http://jsfiddle.net/cuplizian/k72GX/2/）不同的是'.side'不是'固定的' –

Do you mean something like this?

我給#wrapper元素一些新的CSS屬性：

height: 1200px; 
    background-color: red;

的height: 1200px在這種情況下只是爲了測試，使頁面更長。
background-color: red也只是用於測試，使其更加明顯。

你nav元素我已經給下面的CSS屬性：

height: 100%; 
    width: 20%; 
    position: fixed; 
    background-color: green;

的height: 100%被用來製造元素填充頁面的高度
的width: 20%被用來使它寬度爲20%。
position: fixed是使元素粘在頁面上的某個點上。
background-color用於測試，所以你可以更好地看到你在做什麼。

而且，我建議使用CSS復位。這是使用在撥弄一個很簡單的一個IM：

* { 
    margin: 0; 
    padding: 0; 
}

它basicly選擇所有元素，並賦予它一個margin和0padding。

如果你想nav元素是300px寬，使用this fiddle。

修正了顯示

將以下屬性添加到您的#wrapper元素wasnt內容：

width: calc(100% - 300px); 
float: right;

所以它看起來像這樣：

#wrapper { 
    width: calc(100% - 300px); 
    height: 1200px; 
    background-color: red; 
    float: right; 
}

Demo here

來源

2014-07-11 22:30:28 Bas

百分比寬度將解決問題，但我想要一個固定的。此外，內容不可見在你的小提琴:( –

試試這個：http://jsfiddle.net/ALGpP/3/它使用'px'作爲寬度。我知道，現在修復。 – Bas

@WebmasterWouter修正了它，看到更新後的線程 – Bas

固定左側導航+剩餘空間

回答

相關問題