Div with scrollbar inside div with position:fixed [英] Div with scrollbar inside div with position:fixed
问题描述
我有一个div与位置:固定的是我的容器div的一些菜单。我已将其设置为top:0px,bottom:0px始终填充视口。在该div内,我想要有2个其他div,其中较低的一个包含大量的行和溢出:auto。我会期望它将包含在容器div中,但如果有太多的行,它只是扩展到固定的div外面。下面是我的代码和屏幕截图以澄清:
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:
<!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>
我有办法吗?再次,我想#innerer2被正确包含在#outerfixed内,并获得滚动条,如果它比它在#outerfixed内的空间更大。
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.
编辑:我知道我可以设置overflow:auto on #outerfixed,并获得一个滚动条在整个事情,但我特别想要一个滚动条只是#innerstatic2,它是一个网格,我想只滚动网格。
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.
任何人?可能?
推荐答案
这里有一个两步的解决方案,但它带来了一些代价:
There's a two-step solution for this, but it comes at something of a cost:
- 将
overflow-y:scroll;
添加到css for#innerstatic2
。 - 定义
高度
(或max-height
)for#innerstatic2
,否则不会溢出,它只会继续增加其高度(div
是height:auto
)。
- Add
overflow-y: scroll;
to the css for#innerstatic2
. - define a
height
(ormax-height
) for#innerstatic2
, otherwise it won't overflow, it'll just keep increasing its height (the default for adiv
isheight: auto
).
已编辑,因为我只是暂时无法停止。
Edited because I just can't stop myself, sometimes.
演示 jsbin 以显示此jQuery实现,将计算 height
I've posted a demo on jsbin to show a jQuery implementation of this, which will calculate a height
for you (it's not generalised, so it'll only work with your current 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();
}
);
这篇关于Div with scrollbar inside div with position:fixed的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!