1

アンカータグについて質問です。

私はのようなページを持っています

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

私のCSS

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

ただし、test1 から test3 へのリンクをクリックするたびに、「コンテンツ」div がヘッダー div の先頭にプッシュされたようです。そのため、「コンテンツ」div はヘッダー div (150px) で覆われています。とにかく私の問題を解決する方法はありますか? どうもありがとう！

4

4 に答える 4

1

私は試してみます：

.content{position:absolute;top:150px;overflow-y:auto;}

すべてのコンテンツを常にヘッダーの下に配置するように強制します。

于 2013-10-03T00:17:49.383 に答える
0

こんにちは多分これでうまくいくはずです

<a name="AnchorName" class="anchor"></a>

と

.anchor {
   position: relative;
   top: -[number]px;
}

編集 ：

または、このようなアンカーを使用して

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>
于 2013-10-03T00:25:32.737 に答える
0

これは本当に奇妙な方法です...

これが HTML であると仮定し、対象の要素の直前にアンカー (コンテンツなし!) を配置します。

<div id='header'>bunch of stuff and images</div>
<div class='nav'> 
    <a href='#test1'>test1</a>
    <a href='#test2'>test2</a>
    <a href='#test3'>test3</a>
</div>

<div class='content'>
<a name="test1"></a>
<div class='content-panel'>
   <a>test1 project</a>
   bunch of stuff
</div>

<a name="test2"></a>
<div class='content-panel'>
   <a>test2 project</a>
   bunch of stuff
</div>

<a name="test3"></a>
<div class='content-panel'>
   <a>test3 project</a>
   bunch of stuff
</div>

</div>

そして、この CSS を適用します。

body {
    margin: 0;
}
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    height:150px;
    background-color: rgba(125,125,20,0.6)
}
.nav {
    margin-top: 150px;
    border: 0px solid blue;
    padding: 10px;
    width: auto;
    border-bottom: 1px solid blue;
}
.content {
    overflow: auto;
}
.content-panel {
    background-color: lightgray;
    margin: 0px 0;
    padding: 10px;
    height: 400px;
}
a:target {
    display: block;
    line-height: 0;
    margin-bottom: 150px;
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/6gHE6/

このトリックには、:targetセレクターを使用して、アンカーの下部に固定ヘッダーの高さに相当するマージンを追加することが含まれます。

これにより、ページに余分な余白が生成されます。まあ、... 先ほど言ったように、少し奇妙な方法です。

あるいは、JavaScript/jQuery の修正がチケットになるかもしれません!

于 2013-10-03T00:53:14.290 に答える