好的,所以我在屏幕右侧有一个固定的 div
,它是 window
的高度。当内容超出 div
的空间时,我希望 div
用 scrollbar
溢出。
我已经在 Chrome 中做到了这一点,但它在 Firefox 中不起作用。
HTML:
<div id="outer">
<div id="middle">
<div id="inner">
</div>
</div>
</div>
CSS:
div#outer{
position : fixed;
top : 0;
right : 0;
display : table;
z-index : 200;
width : 320px;
height : 100%;
}
div#middle {
display : table-cell !important;
max-width : 300px;
max-height : 100%;
}
div#inner {
overflow-y: auto;
height: 100%;
}
为什么不起作用?我该怎么做才能修复它?
我知道我可以将事件绑定(bind)到窗口调整大小并强制设置 div
高度,但我更喜欢 CSS
解决方案。
最佳答案
用 overflow:auto 制作容器;绝对。 http://jsfiddle.net/NicoO/49SY8/
body, html
{
margin:0;
padding:0;
height:100%;
}
div#outer{
position : fixed;
top : 0;
right : 0;
z-index : 200;
width : 320px;
height : 100%;
}
div#middle {
max-width : 300px;
}
div#inner {
overflow: auto;
position: absolute;
bottom:0;
left:0;
right:0;
top:0;
}
关于css - 没有 Javascript 的固定 100% div 内的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22156989/