Question

请参阅此代码：

html{position:relative;min-height:100%;}

和

<div style="width:100%;height:100%;overflow:auto;">
    <div id="main" style="width:200px;max-height:100px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

此外，Textarea滚动条和调整大小抓取器也无法隐藏。

如何使用CSS修复它？

Chrome中的

（MacOS）。但Safari运行良好。

此代码是快速理解的示例。

内容足够大，需要滚动条。

更新：https://jsfiddle.net/xu3q4m4w/9/

我猜这个问题与LINK有关。

Answer 1

height设置为100%创建滚动条。尝试修复max-height:100%。
以及width。您应该设置为width:100%或max-width:100%以获得全宽，而不是以像素为单位。

<强>更新：

<div style="width:100%;height:100%;overflow:auto;">
    <div id="main" style="max-width:1500px;height:200px;">

    </div>
</div>

jsfiddle

Answer 2

我发现了这个问题。它只发生旧的铬版本（48.0.2564.97）

现在解决它。（48.0.2564.103）

感谢您的回答。

Answer 3

使用这个小提琴溢出-x：隐藏

<div style="width:100%;height:100%;overflow:auto;overflow-x:hidden;">
    <div id="main" style="width:1500px;height:200px;">

    </div>
</div>

Link

CSS Chrome：无法自动隐藏滚动条

3 个答案: