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

当div

.boxB

溢出时，我试图阻止滚动条出现，我不确定我的代码为什么不工作。换句话说，只有当浏览器宽度小于boxB的宽度时，我才尝试删除水平滚动条。这样，仅当浏览器宽度小于

.boxA

时才会显示滚动条

浅蓝色代表屏幕。黄色是背景div，浅绿色是前景div，其宽度超过屏幕宽度。在这种情况下，我不希望滚动条出现。我使用了

overflow-x:hidden

，但这并没有奏效

HTML:

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

你只需要写

overflow: hidden

---

可能是，

overflow-x：隐藏必须用于.boxA？
尝试以下css：

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

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

}

溢出
必须位于包装过大内容的标签上（在您的情况下-
boxA
wrapps
boxB
）。所以，如果您不想让某些内容超出包装器-您必须在HTML代码中的包装器上放置
overflow
，boxeA是父项，boxeb是子项

CSS属性溢出的用法如下：

.boxeA
 {
     overflow: hidden;
 }

.light_blue
 {
     overflow: hidden;
 }

当boxeB的一部分（boxeA的子项）比它自己的父项大时，将阻止它显示

boxeA就像boxeB上的面具

在您给出的url中，为了防止水盒子被完整显示，您必须将水盒子作为浅蓝色盒子的子对象，
并为浅蓝色框提供如下css属性：

.boxeA
 {
     overflow: hidden;
 }

.light_blue
 {
     overflow: hidden;
 }

现在我了解了您的需求，下面是一个可能的解决方案：


参数：

.boxB必须在.boxA外部可见，且没有水平滚动条

如果浏览器宽度小于.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;
}

解决方案是，如果浏览器宽度小于.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;
}

您的目标是防止滚动条出现？您提供的代码正是这样做的：您还在哪个浏览器上看到滚动条？我的目标是防止.boxB出现水平滚动条。我正在使用Chrome和FireFox。。.boxB没有滚动条。但文档正文上有一个滚动条，因为boxB太宽了。哦，我明白了。也许我应该重新回答我的问题。仅当浏览器宽度小于boxB的宽度时，我才尝试删除水平滚动条。我尝试将其应用于
.boxB
，但没有成功。我不想将其应用于
body
，因为如果浏览器比
.boxA
小，我仍然希望用户水平滚动。我尝试将其应用于
.boxA
，但这只是将
.boxB
的宽度缩小到
。boxA
的宽度。然后应用
溢出-x:hidden到正文。将.boxB的宽度缩小到身体的宽度。我想，这就是你想要的。对不起，我应该在我的帖子里说得更清楚（我已经纠正了这个）。只有当浏览器宽度小于boxB的宽度时，我才尝试删除水平滚动条。当我将
overflow-x:hidden
应用于.boxA时，boxB的宽度缩小到800px。我正在使用Chrome。请尝试添加此类
body{overflow-x:hidden；}
并删除
overflow-x:hidden
from
boxA
class这类功能正常，但我只想在浏览器宽度小于boxB的宽度时删除水平滚动条。但是如果浏览器宽度大于boxB的宽度，则不会有滚动条。那么问题是什么呢？如果浏览器窗口比boxB大-无滚动条。只是它变小了-滚动条不会出现，因为溢出-x:隐藏在身体上抱歉，我应该更清楚。我希望滚动条仅在浏览器宽度小于时显示。boxA。还有一个要求。如果浏览器宽度小于.boxA，则需要显示水平滚动条。我目前正在使用Bootstrap，因此我不确定使用
@media
标记是否是个好主意，因为它可能会与Bootstrap的
@media
混淆。我已更新了我的答案，以适应您的上一个要求
@media
不应与引导程序冲突。您可以有多个
@media
定义，它们不会冲突（除非它们可能针对具有相同css属性的相同元素）。以下是带有更新编码的JSFIDLE：