垂直滚动条导致水平滚动条[重复]答案

【问题标题】：Vertical Scrollbar Causes Horizontal Scrollbar [duplicate]垂直滚动条导致水平滚动条[重复]
【发布时间】：2013-11-05 06:55:11
【问题描述】：

似乎有一个类似的问题，通过添加padding-right解决。但是，就我而言，这不起作用，因为我不知道任何 div 的宽度，直到内容在运行时通过 ajax 调用呈现。我有类似的东西

假设下面的伪代码在语法上是正确的。

<div id="parent">
    <div id="child1"> Lots of contents </div>
    <div id="child2"> Lots of contents </div>
</div>

#parent {
    overflow: auto;
    max-width: 600px;
}
#child1 , #child2 {
    display: inline-block;
    max-width: 300px;
}

【问题讨论】：

<div />? div 元素应该有一个结束标签。此外，这还不足以关闭代码。
@quynh 标题在问题陈述中没有任何含义。澄清一下。
通过完全编辑您的问题，您实际上是在删除使其重复的内容。不要那样做；像你一样投票结束就足够了。

标签： html css

【解决方案1】：

您可以将溢出-x 设置为隐藏，溢出-y 设置为自动。这将为您提供垂直滚动而无需水平滚动。

#parent { overflow-x:hidden; overflow-y:auto; }
#child1, #child2 { overflow-x:hidden; overflow-y:auto; }

【讨论】：

这是真的，但如果我的内容真的溢出 x 方向，那么我仍然想要水平滚动条。在这种情况下，滚动条不应该存在。它的出现是因为垂直滚动条出现并占用了父宽度的额外空间。
唯一确定摆脱垂直滚动条的方法是将overflow-y设置为隐藏，但随后您将丢失出现在div底部之后的内容.

【解决方案2】：

您正试图在 child1 和 child2 元素上使用自闭合标签。这不会在大多数浏览器中正确呈现。虽然有些浏览器会用结束标签重写 DOM，但这不是一个好的做法，因为这些浏览器只会在某些范围内重写（真正取决于包含元素的类型）。

这是带有自结束标签的代码：http://jsfiddle.net/nMPwV/

这是带有结束标签的代码：http://jsfiddle.net/nMPwV/1/

【讨论】：

小提琴代码需要在您的答案中复制，而不必强迫读者>>>点击这里