Rewish

ウェブデザイン、HTML、CSS、JavaScript、PHP、WordPress、Movable Typeなど、Web制作で役立つかも知れないBlog.

Search

Entry Search

包容要素にoverflow:hidden;を使う際の注意点メモ

カテゴリー
(X)HTML/CSS
タグ
Coding

高さの異なるカラムを揃えるスタイルシートで包容要素にoverflow:hidden;を指定する際、その中身に対してページ内リンクを使うと移動された部分より上が非表示になります。

具体的な内容は以下に記します。

HTMLサンプル

<div id="wrap">
	<div id="main">
		<div id="section1">
			<!-- 内容 -->
		</section>
		<div id="section2">
			<!-- 内容 -->
		</section>
	</section>

	<div id="navi">
		<p><a href="#section2">第二セクション</a></p>
	</section>
</section>

CSSサンプル

#wrap {
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}

#main {
	float: right;
	width: 550px;
}
	div#section1 {
		background: #FCC;
		height: 500px;	/* 消える領域表現の為の高さ */
	}
	div#section2 {
		background: #CCF;
		height: 500px;	/* デモなので中身無しで高さだけ */
	}

#navi {
	float: left;
	width: 200px;
	margin-bottom: -32768px;	/* 高さを揃える */
	padding-bottom: 32768px;
	background: #CFC;
}

デモと補足

デモページ

ちょっとデモ用に要らない部分を付け足しすぎた感がありますが、そんなに難しい内容では無いので消えることだけ覚えておいて下さい。

Firefox2.0 , Safari3.1 , IE6 , IE7 で消える現象を確認。

※2008-04-16 09:15 修正 : デモページのstyle内のコメントアウトが正しく無かったため、IEとOperaで表示出来ない不具合を修正しました。ご指摘感謝いたします。

原因

抽象的だった部分を具体的に記述しました。

まず、下方向へのpaddingにより [#naviのheight + 32768] pxの領域が確保され、Negative margin と overflow:hidden により [#mainの高さ - #naviのheight - 32768] pxの領域が切り取られ、非表示になります。

ここで大事なのは、切り取られた部分が見えていないだけで存在すると言う点。

この状態でページ内リンクを使って移動すると、見えていないだけで存在する領域も合わせて移動するため、フラグメント識別子で指定したセクションより上の領域が、はみ出した領域として扱われ非表示になってしまいます。

iframeで考えるとイメージし易いと思います。

※この問題に対する画期的な回避方法は特にありませんが、IEではzoom:1;を使うことで回避出来たりします。

wuさんのコメントも大変参考になりますので、是非ご覧下さい。

まとめ

どうしてもページ内リンクを使いたい場合は、カラムの高さ合わせには包容要素に背景を指定する方法など、従来どおりの方法を使う。

理解してても、横着するとたまにやってしまったりするかも。なメモ。