使元素固定位置，但如果內容太大，請按頁面滾動

請參閱this webpage。使元素固定位置，但如果內容太大，請按頁面滾動

首先嚐試滾動它，看到左邊的欄保持不變。
調整窗口的高度，以避免左側欄的所有內容都可見。現在滾動。這一次，左側欄不是固定的。

在這個頁面中，有一個jquery計算左欄的高度，將它與窗口高度進行比較，然後使左欄位置固定或絕對。

但是，我想知道如果類似的東西是可以通過HTML和CSS，而不是使用jQuery或類似的。

有什麼建議嗎？總之，我在尋找的是一個內容保持不變的條形，但如果內容溢出則會滾動。但滾動應該與整個頁面一起。

來源

2012-06-06 Matsemann

這聽起來絕對和相對定位，不是固定不變的。 –

@JeremyHolovacs你爲什麼這麼說？有酒吧位置：固定;是我想要的，只是如果內容太大，我看不到它。 – Matsemann

我不是媒體查詢方面的專家，但看看這個 - 直接CSS到特定的屏幕尺寸，所以如果屏幕太小，可以使用一個樣式表。 http://css-tricks.com/css-media-queries/ – Raekye

您可以使用媒體查詢以某些屏幕尺寸（以及其他內容）引導CSS，以便在屏幕太小時使用一個樣式表。我不是專家，所以沒有例子，但看看這裏http://css-tricks.com/css-media-queries/。抱歉!但猜你想通了:)

編輯：工作結果是這樣的：

#leftnav { 
    /* default look */ 
    width: 300px; 
    position: fixed; 
    top:0; 
    height: 100%; 
} 

/* set the size at which the content is clipped and we cannot have fixed position */ 
@media all and (max-height: 500px) { 
    /* things inside here will only have an effect if the browser window shows 
     less than 500 px in the height, so here I apply the special rules */ 
    #leftnav { 
     position: absolute; 
     height: auto; 
     /* etc.. */ 
    } 
}

來源

2012-06-06 14:09:20 Raekye

使元素固定位置，但如果內容太大，請按頁面滾動

回答

相關問題