當瀏覽器太小時將自動滾動添加到固定元素

我只在瀏覽器太小而無法顯示其所有內容時才試圖給出固定元素的滾動條。當瀏覽器太小時將自動滾動添加到固定元素

我在頁面底部也有一個固定頁腳，我最好喜歡一旦固定元素的內容在頁腳後面開始滾動。

下面是我的問題的簡單例子的鏈接。 http://jsfiddle.net/alsweeet/pGFzF/1/

<div id="container"> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</div>  
<div id="footer"></div> 

#container{ 
    color: #fff; 
    position: fixed; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    background: red; 
    overflow: auto; 
} 

#footer{ 
    position: fixed; 
    height: 50px; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    background: #000000; 
}

的容器是從頂部有一定的距離，所以我不能簡單地給了高度的百分比。

我猜這是一個相當普遍的問題，但我從來沒有來過這個問題，也找不到神奇的詞語來擠出谷歌的答案。

在此先感謝您提供任何有用的建議。

來源

2013-03-24 alsweet

有點像[this JSFiddle]（http://jsfiddle.net/axXGD/）可以嗎？ AFAIK，你需要一個固定的高度來放置滾動溢出。 – Pigueiras 2013-03-24 20:21:56

是的，我認爲我想要實現的是不可能的。我需要滾動條僅在內容太大時纔出現。我可能不得不改變從頂部到百分比的距離。那麼這將允許我以百分比的方式指定容器的高度。 – alsweet 2013-03-24 20:27:36

而[this]（http://jsfiddle.net/Z3uNh/）？另外，如果內容大於容器，滾動條只會出現。 – Pigueiras 2013-03-24 20:43:09

Incase任何人都有同樣的問題，我去百分比選項。如下所示：http://jsfiddle.net/alsweeet/rXrEU/1

理想我本來希望一直保持從頂部的距離是固定高度，但我不認爲這是可能的，允許滾動才能正常工作。

#container{ 
    color: #fff; 
    position: fixed; 
    top: 30%; 
    left: 0; 
    width: 100%; 
    background: red; 
    overflow: auto; 
    height: 70%; 
    margin-top: -50px; 
} 

#footer{ 
    position: fixed; 
    height: 50px; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    background: #000000; 
}

來源

2013-04-23 19:40:10 alsweet

當瀏覽器太小時將自動滾動添加到固定元素

回答

相關問題