2013-08-22 4 views
5

ブラウザを1000pxの幅に縮小すると水平スクロールバーが表示されますが、これを1000px以上で削除する方法はありますか?下の私のscreendumpをチェックしてください。オーバーフローのようなスクロールバーを削除しますが、表示する必要があります

私はclearfixを試しましたが、これは役に立ちませんでした。

.clearfix:before, 
.clearfix:after { 
    content: ".";  
    display: block;  
    height: 0;  
    overflow: hidden; 
} 
.clearfix:after {clear: both;} 
.clearfix {zoom: 1;} /* IE < 8 */ 

これをCSSで簡単に解決する方法はありますか?

+1

質問がありません。「これを1000pxを上回る」とはどういう意味ですか?ウインドウが1000pxよりも広くなると、スクロールバーは自動的に消えます。 –

+1

[水平スクロールバーのない大きなボディー幅]の複製が可能です(http://stackoverflow.com/questions/15005225/large-body-width-without-horizo​​ntal-scrollbar) –

+0

私のscreendumpを確認してください。スクロールは1000pxの幅にする必要があります。ブラウザを1020pxの幅にすると、スクロールバーが表示されます。それは背景画像のようにする必要があります。オーバーフロー:通常は隠されていますが、画像を表示する必要があります。 Overflow hiddenはスクロールを削除しますが、オーバーフローは表示されません:( – user123

答えて

5
@media all and (min-width: 1000px) { 
body { 
    margin:0; 
} 
.wrapper { 
    overflow-x: hidden; 
    } 
} 

ブラウザの横幅が1000pxを超えると、横スクロールが発生しません。

+0

うーん、馬鹿はそれについて考えていない、それは解決策になる可能性があります。ありがとうございました。 cssでこれを行う別の方法があるかどうかはまだ不思議です。メディアの最大幅は1000pxですか?したがって、1000px以下であれば、隠れたオーバーフローが設定されます。 – user123

+0

あなたが正しいところに、私は小さなブラウザを持っているときにオーバーフローを隠すことができるので、私がより好きな他の方法を使用しました – user123

+0

私は助けてうれしいです。 –

0

プロパティを使用して、水平スクロールを作成するdivの水平スクロールバーを非表示にします。

例えば、

Overflow-x:hidden;

EDIT

したい場合は、スクロールが来るべきではない、それはまだ1020年の出番1000pxは、ケースは、あなたがパディングを持っているということです/余白が余分なピクセルを取っているどこかで適用されます。あなたはあなたのことを働かせるためにそれを削除する必要があります。

+0

他の画像は表示されなくなりますが、これらの画像は表示される必要がありますが、スクロールバーが表示されません – user123

+0

スクロールしないで、まだ1020になる1000pxが必要な場合は、パディング/マージンそれらの余分なピクセルを取っているどこかで適用されます。あなたのことを機能させるには、それを削除する必要があります。 - @marcoverflow – Nitesh

+0

私はあなたの時間のおかげでそれを修正しましたNathan – user123

1

唯一可能なことは(あなたのサイトにアクセス可能にしておく)、スクロールバーが表示される幅を設定することです。

ボディの最小幅を設定することで修正できます。

は、あなたのスタイルシートにこれを追加:ブラウザが1200pxよりも小さいサイズが変更された場合

body { min-width: 1200px; } 

、スクロールバーが表示されます。

0

ブラウザが1200pxよりも小さいときは、オーバーフロー:非表示にすることを決定しました。 1000px幅のカルーセル上で使用することができる。 Vladislav Stanicは私に正しい方向に指摘しました。ありがとうございました。

@media all and (max-width: 1200px) { 
    .carousel { 
     overflow-x: hidden; 
    } 
} 
関連する問題