CSS：具有固定位置的側欄被切斷

我的網站有一個有很多東西的邊欄 - 瀏覽器視口的高度必須至少爲1020像素，以便無需滾動即可看到所有內容（除非，當然，你縮小）。CSS：具有固定位置的側欄被切斷

我希望側欄的位置得到修復，以便當您在包含大量內容的頁面上時，側欄與您滾動時保持相同的位置。這是很容易實現：

div#Sidebar { 
    position: fixed; 
}

這種運作良好，我的電腦上，只要因爲我的顯示器是在1920×1200運行的瀏覽器最大化但如果我調整我的瀏覽器窗口，側邊欄被切斷。當我瀏覽頁面的內容時，我可以看到頁面的所有內容，但側欄由於其位置被固定而仍然被切斷。如此看來我只有兩個選擇：

讓側邊欄的位置不是固定的（壞），而是讓用戶能夠看到所有的側邊欄（好）的。
使側欄的位置固定（好），但不允許用戶能夠看到所有的側欄（壞）。

有沒有辦法將這兩個選項結合起來？

來源

2011-06-09 Frank

你可以在javascript中測試無論是純JavaScript還是jQuery （會容易得多）

下面是一個例子jQuery的：

$(window).resize(function() { 
    if ($(window).height() < 800) { 
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed'); 
    } else { 
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute'); 
    } 
});

CSS：

.beFixed {position:fixed;} 
.beAbsolute {position:absolute;top:0px;}

默認情況下，使用絕對版本，所以沒有JavaScript的用戶可以看到整個側邊欄。

來源

2011-06-09 18:53:13 Kraz

這可能是我會做的。謝謝！ – Frank 2011-06-09 20:06:33

嘗試overflow-y:auto並限制大小。我建議將它限制在小於1020像素的位置，因爲很多人都在較小的屏幕上運行（例如，我的15英寸筆記本電腦是1366x768，因此我只能看到大約3/4），甚至是那些在更大的屏幕上不一定最大化他們的窗口。未經測試，但height:100%可能/應該工作。

它將向div本身添加一個滾動條，所以請確保說明這一點，但它會使div滾動，它可以解決你的問題，但它確實犧牲了一點可用性（除了主窗口以外的滾動條一般都會被忽略），

來源

2011-06-09 18:53:03 Shauna

CSS：具有固定位置的側欄被切斷

回答

相關問題