1

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

http://imgur.com/yQDFG

浅蓝色代表屏幕。黄色是背景 div，水色是宽度超过屏幕宽度的前景 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;
}
4

5 回答 5

3

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

于 2012-09-14T22:22:43.400 回答
0

你只需要写

overflow: hidden
于 2012-09-14T22:20:37.730 回答
0

试试这个CSS：

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

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

}

overflow必须在包含太大内容的标签上（在您的情况下 - boxAwraps boxB）。所以，如果你不想让东西跑到包装纸外面 - 你必须穿上overflow包装纸

于 2012-09-14T22:24:30.527 回答
0

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

CSS 属性溢出是这样使用的：

.boxeA
 {
     overflow: hidden;
 }

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

boxeA 就像 boxeB 上的面具。

在您提供的网址中，为了防止水箱完全显示，您必须将水箱作为浅蓝色箱的子代，并为浅蓝色箱提供如下 CSS 属性：

.light_blue
 {
     overflow: hidden;
 }
于 2012-09-14T22:33:54.097 回答
0

现在我明白了你想要什么，这是一个可能的解决方案：

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

参数：

  1. .boxB 必须在 .boxA 之外可见，并且没有水平滚动条。

  2. 如果浏览器宽度小于 .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;
}
于 2012-09-14T22:56:07.673 回答