HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

コンテンツの縦・横幅をブラウザサイズに合わせたい、または、ポップアップ画面を表示するといった場合に、スクロールバーを消すことがあります。

HTML内のブロック要素に対してスクロールバーを消すにはCSSで以下のようにします。

<div class="sample">
このエリア内のコンテンツが溢れてもスクロールバーを表示しないようにする
</div>
div.sample{
	overflow: hidden;
}

ブラウザ全体としてスクロールバーを消す場合は上記の指定をbodyタグに適用します。
しかし、IEの場合にはそれだけでは消えません。IEに適用するためにはHTMLタグにも指定する必要があります。

html, body{
	overflow: hidden;
}

ちなみにですが、インラインフレームなど使う場合はまた違います。
Firefoxなどのブラウザでは

iframe{
	overflow: hidden;
}

は有効ですが、IEでは直接htmlタグに属性として指定しなければなりません。

<iframe scrolling="no">
このiframe内のコンテンツが溢れてもスクロールバーを表示しないようにする
</iframe>

クロスブラウザ!めんどくさいですね。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search