固定側邊欄對於瀏覽器來說太高（底部正在切斷）

假設我有一個固定的側邊欄，它的高度爲XXpx（如果需要可視化我的意思，請參閱http://www.getskeleton.com/）。只要瀏覽器的高度大於側邊欄，側欄就完全符合我的要求。但是，當瀏覽器高度縮小到邊欄的高度以下時，底部內容會被截斷。固定側邊欄對於瀏覽器來說太高（底部正在切斷）

最初，側邊欄有position: fixed，但如果瀏覽器太小而無法包含整個側邊欄，我想將其更改爲position: aboslute。實質上，我希望在頁面加載和任何時候用戶調整大小完成調整頁面大小，以確保底部內容沒有被切斷，然後分配適當的position屬性。

來源

2012-03-07 Wex

做這樣的事情：

var $sidebar = $('#idOfSidebar') 
    ,$w = $(window); 
$w.resize(function() { 
    var pos = $w.height() < $sidebar.height()? 'absolute': 'fixed'; 
    $sidebar.css({position: pos}); 
});

來源

2012-03-08 00:07:32 koenpeters

我從來沒有使用'.resize'函數...我是否需要擔心性能，因爲這個函數可能會在調整大小時被調用幾次？ – Wex 2012-03-08 00:49:11

是的，你應該擔心。這就是爲什麼我將所有「昂貴」的陳述從函數本身中取出，並且只使用其中的緩存函數。 – koenpeters 2012-03-08 00:51:34

有什麼辦法可以進一步優化這個聲明？緩存邊欄的高度似乎是一個非常簡單的初學者 – Wex 2012-03-08 00:55:31

你可以使用這個垂直媒體查詢，像這樣（假設側邊欄是700像素高。）

#sidebar { 
    position: absolute; 
} 

media screen and (min-height:700px) { 
    #sidebar { position: fixed; } 
}

通過首先聲明的絕對位置，您確保瀏覽器不支持媒體查詢將獲得絕對定位的側邊欄，該側邊欄仍將起作用。

來源

2012-03-08 00:03:23

非常乾淨的解決方案，但在舊版瀏覽器中無法使用。 – koenpeters 2012-03-08 00:08:15

謝謝，我想我正在尋找兼容IE7 +的東西。 – Wex 2012-03-08 00:46:02

一種選擇是使用overflow: auto固定塊，可以是可能比browser`s客戶的高度更高。這可以用作默認的純CSS解決方案，可以通過JavaScript方法與協同工作。

來源

2012-03-08 00:08:47

雖然不會在側欄添加單獨的滾動條嗎？ – Wex 2012-03-08 00:46:39

會。它通常比幾個邊欄元素的不可訪問性要好。您可以使用JavaScript _additional_來代替，而不是。 – 2012-03-08 00:48:52

我一定會將其添加到我的代碼中。感謝您的建議。 – Wex 2012-03-08 00:56:34

固定側邊欄對於瀏覽器來說太高（底部正在切斷）

回答

相關問題