position:fixedでヘッダを固定したときのページ内リンクのずれを解決する

position:fixedでヘッダを固定したとき、
ページ内リンクがヘッダの高さ分ずれてしまう時の解決方法の覚え書き。

 

■HTML

<div id="header">
    ここにヘッダーがはいります
</div>
<div id="content">
    <a href="#box01">リンク</a>
    <div name="box01" id="box01">ほにゃらら</div>
</div>

■CSS

#header {
    width: 100%;
    height: 200px;
    position: fixed;
    left:0;
    top:0;
}
#content{
    padding-top: 200px;
}
#box01 {
    margin-top:-200px;
    padding-top:200px;
}

コメントを残す

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

CAPTCHA