CSS div 内带有滚动条的 div 位置：固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3837037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div with scrollbar inside div with position:fixed
提问by Einar Egilsson
I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify:
我有一个带有 position:fixed 的 div，这是我的一些菜单的容器 div。我已将其设置为 top:0px, bottom:0px 以始终填充视口。在那个 div 里面我想有 2 个其他的 div，其中较低的一个包含很多行并且有溢出：自动。我希望它包含在容器 div 中，但如果行太多，它只会扩展到固定 div 之外。以下是我的代码和屏幕截图以澄清：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed.
我有什么办法可以做到这一点吗？同样，我希望#innerstatic2 正确包含在#outerfixed 中，如果它比#outerfixed 内部的空间大，则获取滚动条。
I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the inner element would come with it.
我知道有一些可能性可以通过修复 #innerstatic2 来解决这个问题，但如果可能的话，我真的希望它在 #outerfixed 内部的流程中，这样如果我将 #outerfixed 移动到某个地方，内部元素就会随之而来。
EDIT: I know I can set overflow:auto on the #outerfixed and get a scrollbar on the whole thing, but I specifically want a scrollbar just on #innerstatic2, it is a grid and I want to scroll just the grid.
编辑：我知道我可以在#outerfixed 上设置overflow:auto 并在整个事情上获得一个滚动条，但我特别想要一个仅在#innerstatic2 上的滚动条，它是一个网格，我只想滚动网格。
Anyone? Possible?
任何人？可能的？
回答by David says reinstate Monica
There's a two-step solution for this, but it comes at something of a cost:
对此有一个两步解决方案，但它是有代价的：
- Add
overflow-y: scroll;to the css for#innerstatic2. - define a
height(ormax-height) for#innerstatic2, otherwise it won'toverflow, it'll just keep increasing its height (the default for adivisheight: auto).
- 添加
overflow-y: scroll;到 css 中#innerstatic2。 - 定义一个
height（或max-height） for#innerstatic2，否则它不会溢出，它只会不断增加它的高度（ a 的默认值div是height: auto）。
Edited编辑是因为我有时无法阻止自己。
I've posted a demo on jsbinto show a jQuery implementation of this, which will calculate a heightfor you (it's not generalised, so it'll only work with your current html).
我已经在jsbin上发布了一个演示来展示这个的 jQuery 实现，它会height为你计算 a （它不是通用的，所以它只适用于你当前的 html）。
(function($) {
$.fn.innerstaticHeight = function() {
var heightOfOuterfixed = $('#outerfixed').height(),
offset = $('#innerstatic2').offset(),
topOfInnerstatic2 = offset.top,
potentialHeight = heightOfOuterfixed - topOfInnerstatic2;
$('#innerstatic2').css('height',potentialHeight);
}
})(jQuery);
$(document).ready(
function() {
$('#innerstatic2').innerstaticHeight();
}
);
回答by Ofir D
I solved it by giving absolute position to the ul and height 100%
我通过给 ul 和高度 100% 的绝对位置解决了这个问题
ul {
overflow-y: scroll;
position: absolute;
height: 100%;
}
回答by Dyrehauge
overflow-y:scroll;
overflow-y:scroll;
And add this for iOS devices. It does give a better scroll using touch. The overflow-y needs to be scroll! for secure reasons. auto wont work for some people. or at least thats what i heard.
并为 iOS 设备添加此功能。它确实使用触摸提供了更好的滚动。溢出-y 需要滚动！出于安全原因。auto 对某些人不起作用。或者至少那是我听到的。
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
回答by Afshin
回答by Alejandro Martin
It is the container div who has to be with the overflow:auto attribute. In this case, the #outerfixed div
容器 div 必须具有 overflow:auto 属性。在这种情况下，#outerfixed div
回答by Eric J. Francois
The only way I figure, is to set innerstatic2to absolute position (so you can use top and bottom to size it in relation to outerfixed), then inside innerstatic2create another div where you put your text in. Then you give innerstatic2the "overflow: auto;" indication. The drawback of this method, that innerstatic2 does not move down, when innerstatic1 grows, since it has to be position absolutely. If it needs to move, it must be "position: relative", but then you need to set a fixed height for it. So either way you have to settle for a compromise.
我认为的唯一方法是将innerstatic2设置为绝对位置（因此您可以使用 top 和 bottom 相对于externalfixed 调整它的大小），然后在innerstatic2内部创建另一个 div，您将文本放入其中。然后您给innerstatic2“溢出： 汽车;” 指示。这种方法的缺点是，当innerstatic1 增长时，innerstatic2 不会向下移动，因为它必须是绝对位置。如果它需要移动，它必须是“位置：相对”，但是你需要为它设置一个固定的高度。因此，无论哪种方式，您都必须妥协。
Once all browsers support the newer CSS3 features, like the calculation support, there will be better options to do this, without these drawbacks.
一旦所有浏览器都支持更新的 CSS3 特性，比如计算支持，就会有更好的选择来做到这一点，而没有这些缺点。
回答by SooDesuNe
Not ideal, but this should get you 90% of they way
不理想，但这应该能让你达到 90% 的效果
<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
<div style ="width:15em; background-color: green;">
Title
</div>
<div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
<div style="height:100em; background-color:red; width:10em;">
scroll<br/>
scroll<br/>
scroll<br/>
</div>
</div>
</div>
