我有一个外面板和一个内面板。内部面板包含我想要显示的实际内容。外部面板基本上是一个包装器,用于在更改窗口大小以显示内部面板的内容时生成滚动条。 我想知道我应该设置内面板和外面板来实现这个(比如如何设置面板的属性,比如位置属性......)?我已经将外面板的overflow属性设置为auto了,但是还是不行。
我的代码如下:
#out{
position: absolute;
width: 100% ;
height: 100% ;
min-height: 724px;
min-width: 580px;
}
#in{
position: absolute;
width: 60% ;
height: 70%;
left: 16% ;
top: 10% ;
}
我现在的问题是当浏览器缩小到一定程度时,滚动条会被覆盖。我想知道有什么方法可以让滚动条不被覆盖?
最佳答案
如果我正确理解你的问题,你的页面某处有一个固定宽度的包装器。如果用 max-width 替换 width 属性,如果父元素(在本例中为窗口)变得太小,它将自行调整大小。如果宽度变得小于它的内容,将出现一个滚动条。
演示:http://jsfiddle.net/4d8Sj/2/
HTML:
<div id="outer">
<div id="inner">
Content
</div>
</div>
CSS:
div#outer {
background-color: red;
overflow: auto;
max-width: 500px;
}
div#inner {
background-color: orange;
width: 200px;
height: 100px;
}
(自己做一个演示页面很有用,避免混淆)
关于css - 如何在调整窗口大小时自动生成滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24811465/