css - 如何在调整窗口大小时自动生成滚动条

Question

我有一个外面板和一个内面板。内部面板包含我想要显示的实际内容。外部面板基本上是一个包装器，用于在更改窗口大小以显示内部面板的内容时生成滚动条。我想知道我应该设置内面板和外面板来实现这个(比如如何设置面板的属性，比如位置属性......)？我已经将外面板的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% ;
}

我现在的问题是当浏览器缩小到一定程度时，滚动条会被覆盖。我想知道有什么方法可以让滚动条不被覆盖？

Answer 1

如果我正确理解你的问题，你的页面某处有一个固定宽度的包装器。如果用 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;
}

(自己做一个演示页面很有用，避免混淆)