包容要素にoverflow:hidden;を使う際の注意点メモ
高さの異なるカラムを揃えるスタイルシートで包容要素に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サンプル
div#wrap {
width: 750px;
margin: 0 auto;
overflow: hidden;
}
div#main {
float: right;
width: 550px;
}
div#section1 {
background: #FCC;
height: 500px; /* 消える領域表現の為の高さ */
}
div#section2 {
background: #CCF;
height: 500px; /* デモなので中身無しで高さだけ */
}
div#navi {
float: left;
width: 200px;
margin-bottom: -32768px; /* 高さを揃える */
padding-bottom: 32768px;
background: #CFC;
}
デモと補足
ちょっとデモ用に要らない部分を付け足しすぎた感がありますが、そんなに難しい内容では無いので消えることだけ覚えておいて下さい。
Firefox2.0 , Safari3.1 , IE6 , IE7 で消える現象を確認。
※04/16 09:15 修正 : デモページのstyle内のコメントアウトが正しく無かったため、IEとOperaで表示出来ない不具合を修正しました。ご指摘感謝いたします。
原因
何故消えるのか、それは仕様(wuさんのコメント参照)だからです。
厳密に言うと、overflow:hidden;と言うより、下方向に指定されたパディングとネガティブマージンによる overflow:hiddenで隠れているけど存在する領域 の問題なので、包容要素にoverflow:hidden;を指定しただけでは消えることはありません。
※この問題に対する画期的な回避方法は特にありませんが、IEではdiv#mainとdiv#naviにzoom:1;を指定することで回避出来たりします。
まとめ
どうしてもページ内リンクを使いたい場合は、カラムの高さ合わせには包容要素に背景を指定する方法など、従来どおりのいわゆる正攻法を使う。
仕様を理解してても、横着するとたまにやってしまったりするかも。なメモ。
※04/17 16:47 修正 : 一部誤解を招く箇所があった為、加筆修正しました。
投稿されたコメント
こんばんは。
高さを揃えられる！と喜んで使ってこの現象にはまり、よく考えるとソッカ…ってことがありました。
ラグメント識別子へとページが移動する際、overflow の指定のあるボックスでスクロールを内部ボックスへと切り替え、overflow: hidden のボックスが強制的にスクロールされ、内容物が見えない領域に移動されてしまうのが原因なので、ネガティブマージンは直接関係ないと思います。
以下のようなシンプルなものでも再現できました。
<p><a href="#link">1</a></p>
<div id="box1">
<p id="an">2</p>
<p id="link">3</p>
</div>
–
#an {
margin-bottom: 500px;
}
#box1 {
height: 200px;
background-color: #ccc;
width: 300px;
overflow: hidden;
}
つまるところ、overflow:hiddenで隠れてる領域があるとき、そこがスクロールされると見えてた領域が見えない領域にとんじゃうってことですかね。
ご指摘ありがとうございます。
おっしゃる通り、ネガティブマージンは直接の原因では無いですね。
今回の(カラムの高さを合わせる)例で言うと、直接の原因は下方向へのパディングで、ネガティブマージンはパディングの引き立て役に過ぎません。
包容要素の高さが固定では無い場合、ネガティブマージンを指定しなければこの現象は発生しないと思い、"ネガティブマージン辺り" と言う物凄く曖昧な表現を使用するに至りましたが、よく考えればコレもまた、誤解を生みそうな言葉ですよね。
ご指摘頂いた内容を参考に、記事を修正させて頂きます。ありがとうございました！
> overflow:hiddenで隠れてる領域があるとき、そこがスクロールされると見えてた領域が見えない領域にとんじゃう
この説明がシンプルで解り易いですね。今後、説明の際には使わせて頂きます:-)