Question

我试图阻止当div .boxB溢出时滚动条出现，我不确定为什么我的代码不起作用。换句话说，我只是在浏览器宽度小于boxB的宽度时才尝试删除水平滚动条。这样，仅当浏览器宽度小于.boxA时才会显示滚动条。

浅蓝色代表屏幕。黄色是背景div，aqua是前景div，其宽度超过屏幕宽度。在这种情况下，我不希望滚动条出现。我使用了overflow-x:hidden，但这并不能解决问题。

HTML：

<div class="boxA">boxA  
  <div class="boxB">boxB</div>
</div>

CSS：

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
        overflow-x: hidden;
}

Answer 1

可能是，overflow-x: hidden;必须用于.boxA？

Answer 2

你只需要写

overflow: hidden

Answer 3

试试这个css：

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
    overflow-x: hidden;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;

}

overflow必须位于包含过大内容的标记上（在您的情况下，boxA换行boxB）。所以，如果你不想让一些东西去外包装 - 你必须把overflow放在包装器上

Answer 4

在您的HTML代码中，boxeA是父级，而Box B是子级。

CSS属性溢出使用如下：

.boxeA
 {
     overflow: hidden;
 }

将阻止boxeB的一部分（boxeA的子节点）在比它自己的父节点更大时显示。

boxeA就像是boxeB上的一个面具。

在您给出的网址中，为了防止水族箱被展示出来，您必须将浅绿色的水族箱作为浅蓝色的孩子，并给浅蓝色框一个像这样的css属性：

.light_blue
 {
     overflow: hidden;
 }

Answer 5

既然我明白了你想要的东西，这是一个可能的解决方案：

http://jsfiddle.net/dy8g5/3/

参数：

.boxB必须在.boxA之外可见，没有水平滚动条。
如果浏览器宽度小于.boxB

解决方案是使用媒体查询隐藏水平滚动条，如果浏览器宽度小于.boxB的宽度

@media all and (max-width: 1001px) {
  body {
    overflow-x: hidden;
  }
}

@media all and (max-width: 801px) {
  body {
    overflow-x: visible;
  }
}

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
    overflow-x: hidden;
}

防止水平滚动条出现在溢出的Div中

5 个答案: