CSSでヘッダーを固定にした時にページ内リンクがずれる、の対処法
8 / 18 / 2011
* html body {
background: url(null) fixed;
}
#header {
width: 100%;
height: 50px;
position: fixed;
top:0;
left:0;
}
* html #header {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}
CSSでヘッダーを固定にするのはこんな感じですね。で、このままだとページ内リンクがずれますので、
<h2 name="sec1" id="sec1">sec1</h2> <p>ほげ</p> <h2 name="sec1" id="sec1">sec2</h2> <p>ほげ</p> <h2 name="sec1" id="sec1">sec3</h2> <p>ほげ</p> <ul> <li><a href="#sec1">sec1</a></li> <li><a href="#sec2">sec2</a></li> <li><a href="#sec3">sec3</a></li> </ul>
みたいなHTMLなら
h2 {
padding-top:70px;
margin-top:-70px;
}
とやるといい具合になります。
Tags: CSS








コメントする