Wie kann ein URL-Fragment ein CSS-Layout aus?

Question

Vergleichen Sie diesen 3 URLs (Blick auf der oberen Navigationsleiste jeweils):

1. http://fast.kirkdesigns.co.uk/blog
2. wie oben, aber mit dem URL-Fragmente #navigation
3. wie oben, aber mit der URL-Fragmente # Knoten-2655

Beachten Sie, dass der einzige Unterschied ist das URL-Fragment am Ende.

Die ersten beiden Seiten angezeigt werden absolut in Ordnung (in Firefox zumindest). Es ist die dritte, wo das Problem liegt. Das Fragment # node-2655 drückt den oberen navbar weg von der Oberseite des Bildschirms. Wenn Sie dann oben auf der Seite zurückblättern, hat die navbar halbiert. Dies geschieht, wenn ein beliebiges URL-Fragment verwenden, das die navbar verursacht aus dem ursprünglichen Ansichtsfenster sein, wenn die Seite zuerst geladen wird.

Also, wie kann das CSS-Layout wie folgt ein URL-Fragment beeinflussen verwenden?

DIE LÖSUNG: wie unten vorgeschlagen, den Überlauf zu entfernen: auf dem Containerelement versteckt, die die navbar gehalten das Problem behoben. Ich würde gerne, warum obwohl verstehen!

Answer 1

Nehmen Sie die overflow:hidden auf #main in css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

Ich würde sagen, es ist ein Rendering-Fehler in FireFox, wie es in Opera Ordnung. Es sollte nicht ohnehin ein Anker sein würde, die CSS ändern, wie Sie sagen (es sei denn, Sie jQuery oder etwas verwenden).

Answer 3

Ich habe dieses Problem auch und denken kann ich sehen, was geschieht.

Der „Spalte“ Block mit dem massiven (5678 Pixel) Rande und Polsterung macht, dass der Block sehr groß. In anderen Browsern als Firefox, heben sich die positiven und negativen Werte gegenseitig aus, aber FF wirklich macht es, dass groß -. Art

FF kennt auch die beiden sich gegenseitig aufheben, scheint aber an der 5678px Polsterung zu suchen und entscheidet der Spaltenblock wird die Unterseite des #wrapper Block Stossen. Dies ist Überlauf - und mit Überlauf auf Auto auf #wrapper, sehen Sie die wahre Größe von #wrapper mit einer Scroll-Leiste auf der Seite

.

Mit Überlauf gesetzt versteckt, nimmt FF die Scrollbar entfernt, scheint aber immer noch den Inhalt von #wrapper so dass das Element die Fragmentpunkte blättern am oberen Rand der Seite ist. Dies ist ein normales Verhalten für Fragmentverknüpfungen in scrollbaren Blöcken, aber da es keine Scrollbar ist, können Sie den Inhalt wieder nach unten nicht bewegen, also sieht es aus wie das Layout durch das Fragment bewirkt wurde.

Also kurz gesagt, ich vermute, dass FF eine unsichtbare Scrollbar in diesem Beispiel arbeitet. Das könnte einen Fehler in Betracht gezogen werden, aber es ist wahrscheinlich die richtige Verhalten. Die Möglichkeit, den Inhalt nach oben und unten in einem nicht-übergelaufenen feste Größe Block mit URL-Fragmenten zu bewegen, ist eine Technik, die effektiv verwendet werden kann Bild „Schieber“ zu implementieren, die auch in Abwesenheit von JavaScript arbeiten.

Ich hoffe, das hilft. Dies wurde verwirrend ich seit Jahren, und diese Erklärung plötzlich fiel mich aus heiterem Himmel. Meine aktuelle Abhilfe für dieses ist jQuery zu verwenden „navigieren Sie zu“ Plugin die ganze Seite nach unten auf das Fragment zu bewegen, da dies intern den Inhalt #wrapper von Scrollen zu verhindern scheint.

Sie können auch „display: versteckt“ take off #wrapper, aber Ihre Seite dann lange eine halbe Meile endet

.

Answer 4

Ich werde Sie brauchen nur darauf hin, dass es möglicherweise einige seltsame Erbschaft von den mehr als 30 Sheets im Kopf verbunden sein. Es nicht kann, entweder, und es ist wahrscheinlich ein Rendering-Bug (möglicherweise :target Styling Bezug), die Dan vorgeschlagen. Ich habe einfach es erwähnenswert, dass, wenn Sie mehr als dreißig Sheets haben, Sie wahrscheinlich einige Seltsamkeit zu sehen beginnen, was auch immer sonst noch passiert.

Answer 5

Der Grund wird die Säule mit der großen Polsterung erweitert es Behälter ist, aber die Erweiterung wird dann versteckt, aber overflow: hidden; aber mit der Verwendung des Fragments in die Position des Fragments gescrollt wird, effektiv etwas über dem Abhacken. Sie können JavaScript verwenden und scrollTop auf 0 und es navigieren Sie zurück in die Normalposition.

Im Grunde ein wierd Rand Fall des Browser scheint nicht sehr gut zu handhaben.

Answer 6

Leider ist dies keine „Antwort“, tho es eine Antwort auf die anderen Kommentare hier. Dieses Problem wird flabbergasting einfach. Es ist sehr leicht zu isolieren (das heißt, hat nichts mit der Anzahl der Sheets zu tun), und hat keine richtige „Lösung“, da es keine Möglichkeit, das gewünschte Rendering zu erzielen.

<!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>

Answer 7

So wie eine Randnotiz, ist die obige Technik im Allgemeinen bieten flexible Breite Mulit-Spalten-Layouts verwendet. Dies wird wahrscheinlich immer weniger wichtig in diesen Tage als feste Breite Layouts werden viel mehr Kommentar zu werden - Browser kann die Web-Seite zu sehen, kleinen Text und feste Breite macht es viel einfacher zu steuern, um die Typographie einer Seite vergrößern, z.B stellen Sie die Breite (in ems) die idealen neun Wörter pro Zeile angezeigt werden, unabhängig davon, welche Schriftgröße und Vergrößerung der Benutzer auswählt.

Sorry, wenn das nicht wie eine Antwort klingt, aber es ist darauf hindeutet, im Grunde dieses alte Modell zu verwerfen und betrachtet zu fester Breite Spalten zu bewegen (was ein ganz neues Thema ist).

Answer 8

Ich konnte dies mit einigen Javascript lösen, den Körper in die Position verborgene Element des Überlaufes blättern wurde gescrollt.

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)