有没有办法让CSS中的锚点保持空白? [英] Is there a way to margin an anchor in css?

问题描述

我的标头高度固定为50px.在我的体内，我有很多锚.问题是，当我单击指向锚点的链接时，锚点出现在固定标题下，并且丢失了50px的内容(我需要向上滚动50px才能读取标题下的内容).

I have a fixed header height 50px. In my body, I have a lot of anchors. The problem is that, when I click on links pointing to anchors, the anchor appears under my fixed header and I lose 50px of content (I need to scroll up of 50px to read content under the header).

有没有办法使50px的锚边距空白?我的身体充满了很多框(div)，它们之间有一个边距，因此我无法放置一个50px的空div并在其后锚定..

Is there a way to margin an anchor of 50px? My body is filled with a lot of box (divs) with a margin between themself, so I can't put in place an empty div of 50px and then anchor after it..

html:

<div id="header"></div>
<div id="content">
     <div class="box" id="n1"></div>
     <div class="box" id="n2"></div>
     <div class="box" id="n3"></div>
</div>

css:

#header{
    height: 40px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: fixed;
    text-align: center;
    z-index:2;
}

#content{
    padding-top: 50px; 
    margin: 0px;
}

.box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    vertical-align : top;
    padding: 1.4%; /* Keep it in percent (%) */
    margin-bottom: 30px;
    min-height: 200px;
}

推荐答案

如果标题确实是固定的，则将锚点放置在可滚动的div中.然后包含锚点的div将滚动而不是整个页面.参观小提琴，然后单击anchor1.它去锚点2.依此类推.

If the header is truly fixed then place your anchors in a scrollable div. Then the div containing the anchor will scroll instead of the entire page. Visit the fiddle and click on anchor1. It goes to anchor2. And so forth.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css-将溢出设置为隐藏在主体上，以防止默认滚动.在顶部和底部设置的新内容区域上使用绝对位置.这会强制其拉伸以适合其余的视口窗口.

css - set overflow hidden on body to prevent default scrolling. Use position absolute on the new content area with top and bottom set. This forces it to stretch to fit the remaining viewport window.

body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content { 
    overflow: scroll; 
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100%;
    border: 1px solid blue; 
}

html

<div id="header">header</div>
<div id="content">
    <div>
        Page Content <br />
        <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>                
        <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a>   
    </div>
</div>​

这篇关于有没有办法让CSS中的锚点保持空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！