滚动覆盖 HTML 中的 div 元素答案

【问题标题】：Scroll covering the div element in HTML滚动覆盖 HTML 中的 div 元素
【发布时间】：2014-03-27 21:35:24
【问题描述】：

当我按下按钮 (+ 添加卡片) 时，会创建 div 元素，就像一张卡片一样。同时我有卷轴，覆盖卡片。如下图所示。我不想要这个。我怎样才能避免这种情况？ Demo

/*Style of a inbox list*/
#inboxList {
    width: 275px; height: 700px;
    background-color: #f0f0f0;
    border: 1px solid black;
    margin-left: 0.5%;
    margin-top: 0.4%;
    border-radius: 10px;
    box-shadow: 7px 7px 7px #828282;
    overflow: scroll;
}

【问题讨论】：

只是增加宽度？还是我错过了什么？
当你不希望滚动条设置overflow: auto 不滚动时。 jsfiddle.net/NicoO/62QY8/55 ...我不明白那些对这些问题投反对票的人。有代码演示甚至图像。目前还不太清楚实际问题是什么，但我认为有些人的行为有点苛刻-
@NicoO Downvote 是因为 OP 显然没有表现出任何努力来解决他的问题，例如，试图理解他正在使用的简单代码。对我来说看起来很公平。 “我怎样才能删除滚动条？” “那你到底为什么要使用overflow: scroll;???等等......而且你的问题很不清楚，如果内容高于容器，我们不知道究竟期待什么
我理解你的观点@A.Wolff，只是 OP 对材料来说似乎很新。当我们查看This question shows research effort; it is useful and clear (click again to undo) 时，我得出的结论是，“展示了研究成果”-检查，“它有用且清晰”-不。

标签： jquery css html scroll

【解决方案1】：

您正在设置固定高度，请改用min-height，例如：http://jsfiddle.net/62QY8/57/

当然，删除：overflow: scroll;

更新：

DEMO jsFiddle

$('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);
        var $userAddedCard = $('#userAddedCard');
        $userAddedCard.append($newDiv);
        var testWidth = $userAddedCard.innerWidth() - $userAddedCard[0].scrollWidth;
        if (testWidth) {
            $userAddedCard.find('.sortable-div').width(260 + testWidth);
        }
    });

【讨论】：

也许我不清楚对不起。我还想要卷轴。同时，如果我添加很多卡片，有时卡片会到达底部。然后我想使用“溢出：自动；”在 CSS 中。卷轴仍然会覆盖卡片。滚动发生时是否可以使卡片缩小？你明白我的意思吗？
您可以检测水平滚动条然后设置相关宽度，查看更新答案
正是我需要的。非常感谢:)

【解决方案2】：

您可以轻松地做到这一点，只需更改 css 显示属性，如

#inboxList {
    /* other styles */
    overflow: visible;
}

【讨论】：

或者只是删除溢出：滚动。

【解决方案3】：

将“#inboxList”的宽度改为350px

【讨论】：