URL フラグメントは CSS レイアウトにどのような影響を与えるのでしょうか?

StackOverflow https://stackoverflow.com/questions/1216299

質問

これら 3 つの URL を比較してください (それぞれの場合、上部のナビゲーション バーを確認してください)。

  1. http://fast.kirkdesigns.co.uk/blog
  2. 上記と同様ですが、URL フラグメント #navigation を使用します
  3. 上記と同様ですが、URL フラグメント #node-2655 を使用します

唯一の違いは最後の URL フラグメントであることに注意してください。

最初の 2 ページは (少なくとも Firefox では) 全く問題なく表示されます。問題は3番目です。フラグメント #node-2655 は、上部のナビゲーションバーを画面の上部から押し出します。その後、ページの先頭までスクロールして戻ると、ナビゲーションバーが半分に切り取られています。これは、ページが最初に読み込まれたときにナビゲーションバーが初期ビューポートの外に出る原因となる URL フラグメントを使用した場合に発生します。

では、URL フラグメントを使用すると、このように CSS レイアウトにどのような影響が及ぶのでしょうか?!

ソリューション：以下に提案されているように、オーバーフローを削除します。ナビゲーションバーを保持するコンテナ要素の非表示により問題が修正されました。その理由をぜひ理解したいと思います！

役に立ちましたか？

解決

css_75afd7072eaf4096aaebf60674218e31.cssの #main の overflow：hidden を削除します

他のヒント

Operaでは問題ないので、FireFoxのレンダリングのバグだと思います。とにかく、アンカーがあなたの言うようにCSSを変更することはないはずです（jQueryなどを使用している場合を除く）。

私もこの問題を抱えており、何が起こっているかがわかると思います。

巨大な (5678 ピクセル) マージンとパディングを持つ「列」ブロックにより、そのブロックの高さが非常に高くなります。Firefox 以外のブラウザでは、正の値と負の値が互いに打ち消し合いますが、FF では実際にそこまで高くなります。

FF も 2 つが互いに打ち消し合っていることを認識していますが、5678px のパディングを見て、列ブロックが #wrapper ブロックの下部からはみ出していると判断しているようです。これはオーバーフローです。#wrapper でオーバーフローを自動に設定すると、横にスクロール バーが表示され、#wrapper の実際のサイズが表示されます。

オーバーフローを非表示に設定すると、FF はスクロールバーを取り除きますが、フラグメントが指す項目がページの先頭に来るように #wrapper のコンテンツをスクロールするようです。これは、スクロール可能なブロック内のフラグメント リンクの通常の動作ですが、スクロールバーがないため、コンテンツを再度下にスクロールして戻すことができないため、レイアウトがフラグメントの影響を受けたように見えます。

つまり、この例では FF が目に見えないスクロールバーを操作しているのではないかと思われます。これはバグと考えられるかもしれませんが、おそらく正しい動作です。URL フラグメントを使用して、オーバーフローしない固定サイズのブロック内でコンテンツを上下にスクロールできることは、JavaScript がない場合でも機能する画像「スライダー」を実装するために効果的に使用できるテクニックです。

それが役立つことを願っています。このことは私を長年困惑させてきましたが、この説明は突然私に衝撃を与えました。この問題に対する現在の回避策は、jQuery の「scroll to」プラグインを使用してページ全体をフラグメントまでスクロールすることです。これにより、#wrapper のコンテンツが内部でスクロールできなくなるようです。

「表示:#wrapper から「hidden」を削除しても、ページの長さは 0.5 マイルになってしまいます。

頭の中でリンクされている30以上のスタイルシートから奇妙な継承があるかもしれないことを指摘しておきます。また、Danが提案したレンダリングバグ（おそらく：target スタイリングに関連する）である可能性もあります。 30を超えるスタイルシートを持っている場合、何か他のことが起こる可能性があるので、奇妙なものを見始める可能性が高いことを指摘する価値があると感じました。

理由は、大きなパディングのある列がコンテナを拡張したためですが、拡張は非表示になりますが、overflow：hidden;しかし、フラグメントを使用すると、フラグメントの位置にスクロールされ、その上にあるものは事実上切り取られます。 JavaScriptを使用してscrollTopを0に設定すると、スクロールして通常の位置に戻ります。

基本的に、ブラウザがあまりうまく処理できないと思われる奇妙なエッジケース。

これは「回答」ではありません。 thoそれはここの他のコメントへの応答です。この問題は非常に深刻です。分離するのは非常に簡単です（つまり、スタイルシートの数とは何の関係もありません）。適切な「解決策」はありません。目的のレンダリングを実現する方法がないため。

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>

補足として、上記の手法は一般に、柔軟な幅の複数列レイアウトを提供するために使用されます。固定幅のレイアウトがより多くのコメントになっているため、これはおそらく最近ではあまり重要ではありません-ブラウザーはWebページを拡大して小さなテキストを表示でき、固定幅によりページのタイポグラフィの制御がはるかに簡単になり例えばユーザーが選択したフォントサイズと倍率に関係なく、理想的な1行あたり9ワードを表示するように幅（ems）を設定します。

それが答えのように聞こえない場合は申し訳ありませんが、基本的にはこの古いモデルを破棄し、固定幅の列（まったく新しい主題）への移行を検討することを提案しています。

オーバーフローの非表示要素がスクロールされた位置にボディをスクロールするJavaScriptでこれを解決できました。

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top