Question

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

（自己制作一个演示页面很有用，可以避免混淆）

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

1 个答案: