Question

这是我的jsfiddle主结构：http://jsfiddle.net/LQtaJ/ div中有2个div

<div id="c1">
    <div id="c2"></div>
    <div id="c3"></div>
</div>

我希望即使#c2和#c3溢出窗口，也不会出现x滚动条。所以，我知道我可以overflow-x: hidden使用<body>，但还有其他方式不会影响一切吗？就像放一些负余量一样？

由于

Answer 1

您的问题不是很清楚，但如果我理解正确而是在overflow-x: hidden上应用body，您可以直接在包装#c1上进行

Answer 2

看到这个小提琴：http://jsfiddle.net/LQtaJ/1/（你的小提琴，更新）。

我添加了“main”div和它的风格：

#main {
    overflow:hidden;
}

在这个小提琴中，我将你的布局包装在一个更大的静态div中。 div有溢出：隐藏。这意味着：即使c2和c3溢出c1，全部内容也不会溢出窗口（即在这种情况下，包装#main div）。

如果你不想让它们溢出c1，请将overflow：hidden隐藏在c1而不是main中。

Answer 3

有点傻，但你可以在你的c1包裹上添加一个包裹：JS Fiddle

HTML

<div id="wrap">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div>
</div>

CSS

#wrap {
    overflow-x: hidden;
}
#c1 {
    width: 600px;
    position: relative;
    background-color: #999;
    height: 300px;
}
#c2, #c3 {
    width: 1000px;
    position: absolute;
    top: 0;
    background-color: #000;
    height: 100px;
}
#c2 {
    left: -1000px;
}
#c3 {
    right: -1000px;
}

避免由大div引起的页面溢出

3 个答案: