idでページ内リンクと2段組みの高さ合わせの技について
併用すると、ページ内リンクを使ったページのコンテンツ表示が、id属性の及ぶ範囲しか表示されなくなる。
position:absolute の指定があるタグは助かる?
例えば、
<div class="wrapper clearfix"> <div class="block_left"> <p id="item01">...</p> </div><!--/block_left--> <div class="block_right"> ... </div><!--/block_right--> </div><!--/wrapper-->
というhtmlソースで、
cssの段組み部分は、
.block_left { float: left; width: 68%; } .block_right { float: right; width: 30%; }
というような構成では、
通常、block_leftとblock_rightの高さは、コンテンツの高さが同じにならなければ、合わない。
なので、両方の段を区切る線を、どちらかのdivにborderで指定すると、
コンテンツの高さが短い方に指定してある場合は、途中で途切れてしまう。
途中で途切れないようにするために、両段のコンテンツの差が誤差となるくらい高さを確保してやって、
overflow: hiddenで隠す、という技がある。
こちらを参照:
例えば、こんな感じ。
.wrapper { overflow: hidden; } .site_left, .site_right { margin: 0 0 -32768px padding: 0 0 32768px }
この設定がある状態で、
ほかのページから、#item01付きでリンクをはると、遷移したときに、
item01の領域がページの上端にくるように表示される
(スクロールして表示されるのではなく、item01より上のコンテンツが表示されなくなる)。
ソースを確認すると、見えなくなってしまった部分も含まれている。
IE6では再現せず(id属性によるページ内リンクが使えないから?)。
overflow:hidden
をはずすと解消されるが、下マージンが-32768px分のスクロールバーが出る。
この方法を使わない場合、両段の区切り線は、
画像で作って、wrapperの背景画像に指定する。
x方向の位置は、site_leftのwidthと同じに。
%指定ができるので、リキッドレイアウトでも可。