1. HOME
  2. ブログ
  3. ブログ
  4. 山本ブログ
  5. position:fixedでヘッダを固定したときのページ内リンクのずれを解決する

BLOG

ブログ

山本ブログ

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;
}
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事