1

更新:これは、と アンカー<div>の組み合わせによる の非常に特殊な問題であることがわかりました。overflow: hiddenそれを回避する確実な方法はないようです。を削除しましたoverflow: hidden。これでアンカーの問題は解決しますが、列の下に余分なスペースが作成されます。これはそれほど大きな問題ではありませんが、を使用せずにオーバーフローを取り除く方法を誰かが知っている場合はoverflow: hidden、提案を歓迎します。更新終了

私は、ヘッダーが<div>2 つ以上の列にあるかなり単純な Web サイトを持っています。ヘッダーと列は 1 つのコンテナーにあります。ヘッダーは固定されていません。下にスクロールすると、ヘッダーが表示されなくなります。

さて、私の問題は、右の列に追加したいアンカーにあります。アンカー自体は正しく機能します。ページの上部にあるリンクをクリックすると、問題なくジャンプし<h2>ます。希望どおりに、タイトルを画面の上部に配置します。ただし、問題は、スクロールして一番上に戻ると、列のコンテンツの上部がヘッダーの後ろに移動することです。最初はページの一番上までずれていると思っていましたが、そうではないことがわかりました。ピクセル数が何に対応するのかわかりません。列自体は適切な長さを保っているようです。テキストの下に余分な空白ができました。

このウェブサイトで他の人の質問をいくつか読みましたが、それらはすべて固定ヘッダーを扱っており、アンカータグ自体がヘッダーの後ろに消えてしまうという問題がありました。この問題に対して提案された解決策を試しましたが、アンカー タグがページ上で低すぎて表示され、列の上部がヘッダーの後ろに表示されるという問題が解決しません。

どなたか、これを直す方法をご存知ないでしょうか...？

ページ設定用の私の HTML:

<div id="container">

    <div id="header">
    </div>

    <div id="columns">
        <div id="leftcolumn">
        </div>

        <div id="rightcolumn">
        </div>
    </div>
</div>

ヘッダーと列の私の CSS:

#header {
    width: 738px ;
    height: 298px ;
    padding: 0px ;
    position: relative; 
    }

#container {
    width: 738px ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 0px ;
    margin-bottom: 0px ;
    padding: 0px ;
    }

#columns {
    position: absolute;
    margin-top: 0px;
    margin-bottom: 0px ;    
    width: 738px ;
    background: #b43232 url(fauxcolumns.jpg) ;
    overflow: hidden ;  
    }   

#leftcolumn {
    float: left;
    width: 254px ;
    margin-top: 0px ;
    padding: 0px ;
    }

#rightcolumn {
    margin-left: 254px ;
    margin-top: 0px ;
    padding: 0px ;
    }

最後に、アンカー用の HTML:

<a href="#text">Text</a>
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>

要約すると、アンカーは機能しますが、スクロールして一番上に戻ると、コンテンツの上部がヘッダーの後ろに移動しています。したがって、ヘッダーの後ろのランダムな場所ではなく、列のコンテンツを列の上部に揃えたいと思いますが、その方法は想像できません。いずれかまたは両方の列にtoporを個別に設定しても機能しません。他に思いつかない…margin-top#columns

誰にもアイデアはありますか？

4

0 に答える 0