当浏览器太小时将自动滚动添加到固定元素

我只在浏览器太小而无法显示其所有内容时才试图给出固定元素的滚动条。当浏览器太小时将自动滚动添加到固定元素

我在页面底部也有一个固定页脚，我最好喜欢一旦固定元素的内容在页脚后面开始滚动。

下面是我的问题的简单例子的链接。 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

当浏览器太小时将自动滚动添加到固定元素

回答

相关问题