溢出：自动更改内部 div 元素宽度答案

【问题标题】：overflow:auto changes internal div element width溢出：自动更改内部 div 元素宽度
【发布时间】：2014-01-16 09:24:54
【问题描述】：

HTML：

<div id="jhjhssed" class="hhsfjhjruweyr" id="fhsdjfhsss" style="">
    <div class='bubble5'>Andrew Stockard
        <img src='Status-tray-online-icon (1).png' class='onlinecircle' />
    </div>
</div>

CSS：

.bubble5 {
    position: relative;
    top: -27px;
    word-wrap: break-word;
    font-size: 15px;
    margin-left: 51px;
    width: auto; 
}
.hhsfjhjruweyr {
    text-shadow: 0 1px 0 #fff;
    color: #000;
    font-family: Arial;
    border-top: 1px solid #8d8d8d;
    overflow: hidden;
}
.hhsfjhjruweyr:hover {
    overflow-y: auto;
}
.onlinecircle {
    position: absolute;
    top: 1px;
    right: 5px;
}

问题是，当我悬停时，滚动条会按预期显示，但是当我取消悬停时，id 为 jhjhssed 的 div 中所有元素的宽度会发生变化。通过更改，我的意思是它变得更小以适应下一次悬停时的滚动条..我想要的是...显示滚动条时的宽度变化很好，但我希望它在滚动条不再可见时返回到 100% 宽度我甚至尝试将 width:100% 添加到 div jhjhssed 但它不起作用.. 我该怎么做...

无滚动条：

滚动条：

滚动条出现后：

应该是什么样子：

希望我能说清楚..

【问题讨论】：

请创建jsfiddle.net
嗯，这是一个很常见的问题。解决方案 1 始终显示滚动条：高度：101%。解决方案 2 使用 javascript 更改 css。 stackoverflow.com/questions/18548465/…
您的外部 div 上有两个 id 属性。我相信这会给你带来麻烦。

标签： css

【解决方案1】：

与各种浏览器最兼容的解决方案可能涉及使用 JavaScript。

我最喜欢的跨浏览器 JavaScript 库是 jQuery，我推荐以下解决方案：

$('.hhsfjhjruweyr').mouseout(function(){
    $(this).css('overflow-y', 'hidden');
});

顺便说一句，你从哪里得到像“hhsfjhjruweyr”这样的类名？

【讨论】：

我可以使用一点 java 脚本解决这个问题，现在我还有一个问题，如何永久禁用网页滚动..？