1

.boxBdivがオーバーフローしたときにスクロール バーが表示されないようにしようとしていますが、コードが機能しない理由がわかりません。つまり、ブラウザの幅が 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

たぶん、 .boxAoverflow-x: hidden;を使用する必要がありますか?

于 2012-09-14T22:22:43.400 に答える
0

あなたが何を望んでいるのか理解できたので、考えられる解決策は次のとおりです。

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

パラメーター：

  1. .boxB は、水平スクロールバーなしで .boxA の外側に表示する必要があります。

  2. ブラウザの幅が .boxB の幅よりも小さい場合、ブラウザに水平スクロールバーを表示しないでください。

解決策は、メディア クエリを使用して水平スクロールバーを非表示にすることでした。IF ブラウザの幅が .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 に答える
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 のマスクのようなものです。

指定した URL で、アクア ボックスが完全に表示されないようにするには、アクア ボックスを水色のボックスの子として配置し、水色のボックスに次のような css プロパティを指定する必要があります。

.light_blue
 {
     overflow: hidden;
 }
于 2012-09-14T22:33:54.097 に答える