In che modo un frammento di URL può influire su un layout CSS?

Question

Confronta questi 3 URL (guarda la barra di navigazione in alto in ogni caso):

1. http://fast.kirkdesigns.co.uk/blog
2. come sopra ma con il frammento urna #navigation
3. come sopra ma con il frammento url # node-2655

Nota, l'unica differenza è il frammento di URL alla fine.

Le prime due pagine vengono visualizzate perfettamente (almeno in Firefox). È il terzo in cui si trova il problema. Il frammento # node-2655 spinge la barra di navigazione superiore dalla parte superiore dello schermo. Quando si scorre nuovamente fino all'inizio della pagina, la barra di navigazione è stata tagliata a metà. Ciò accade quando si utilizza un frammento di URL che causa la fuoriuscita della barra di navigazione dalla finestra iniziale al primo caricamento della pagina.

Quindi, in che modo l'utilizzo di un frammento di url può influire sul layout CSS in questo modo ?!

LA SOLUZIONE: come suggerito di seguito, rimuovendo l'overflow: nascosto sull'elemento contenitore che conteneva la barra di navigazione risolto il problema. Mi piacerebbe capire perché!

Answer 1

Rimuovi il overflow: nascosto su #main in css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

Direi che è un bug di rendering in FireFox perché va bene in Opera. Non ci dovrebbe essere comunque un punto di ancoraggio che cambierebbe il CSS come dici tu (a meno che tu non stia usando jQuery o qualcosa del genere).

Answer 3

Anche io ho questo problema e penso di poter vedere cosa sta succedendo.

La colonna " " il blocco con il massiccio margine (5678 pixel) e l'imbottitura lo rendono molto alto. In browser diversi da Firefox, i valori positivi e negativi si annullano a vicenda, ma FF lo rende davvero così alto.

FF sa anche che i due si annullano a vicenda, ma sembra guardare l'imbottitura di 5678px e decide che il blocco di colonne sporge dalla parte inferiore del blocco #wrapper. Questo è overflow - e con overflow impostato su auto su #wrapper, vedi la dimensione reale di #wrapper con una barra di scorrimento sul lato.

Con l'overflow impostato su nascosto, FF toglie la barra di scorrimento, ma sembra comunque scorrere il contenuto di #wrapper in modo che l'elemento a cui punta il frammento sia nella parte superiore della pagina. Questo è un comportamento normale per i collegamenti di frammenti in blocchi scorrevoli, ma poiché non esiste una barra di scorrimento, non è possibile scorrere nuovamente il contenuto verso il basso, quindi sembra che il layout sia stato effettuato dal frammento.

Quindi, in breve, sospetto che FF stia gestendo una barra di scorrimento invisibile in questo esempio. Potrebbe essere considerato un bug, ma è probabilmente un comportamento corretto. Essere in grado di scorrere il contenuto verso l'alto e verso il basso all'interno di un blocco di dimensioni fisse non traboccate utilizzando frammenti di URL, è una tecnica che può essere utilizzata in modo efficace per implementare "cursori" di immagini ". che funziona anche in assenza di JavaScript.

Spero che sia d'aiuto. Questo mi ha sconcertato per anni e questa spiegazione mi ha improvvisamente colpito di punto in bianco. La mia attuale soluzione alternativa è utilizzare jQuery " scorrere fino a " plugin per scorrere l'intera pagina fino al frammento, poiché ciò sembra impedire al contenuto di #wrapper di scorrere internamente.

Puoi anche prendere " display: nascosto " su #wrapper, ma la tua pagina finisce per mezzo miglio.

Answer 4

Voglio solo sottolineare che potrebbe esserci una strana eredità dagli oltre 30 fogli di stile collegati nella testa. Potrebbe anche non esserci, ed è probabilmente un bug di rendering (probabilmente correlato allo stile : target ) che Dan ha suggerito. Ho solo sentito la pena sottolineare che se hai più di trenta fogli di stile, probabilmente inizierai a vedere delle stranezze, qualunque altra cosa possa accadere.

Answer 5

Il motivo è che la colonna con la grande imbottitura ha espanso il suo contenitore, ma l'espansione è quindi nascosta ma traboccante: nascosta; ma con l'uso del frammento viene fatto scorrere nella posizione del frammento, tagliando effettivamente qualsiasi cosa sopra di esso. Puoi usare javascript e impostare scrollTop su 0 e farlo scorrere nuovamente nella posizione normale.

Fondamentalmente un caso bizzarro che i browser non sembrano gestire molto bene.

Answer 6

Siamo spiacenti, questa non è una " risposta, " tuttavia è una risposta agli altri commenti qui. Questo problema è semplicemente sbalorditivo. È molto facile da isolare (ovvero non ha nulla a che fare con il numero di fogli di stile) e non ha una soluzione "corretta", " poiché non è possibile ottenere il rendering desiderato.

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

Proprio come una nota a margine, la tecnica di cui sopra viene generalmente utilizzata per fornire layout di colonne mulit di larghezza flessibile. Ciò sta probabilmente diventando meno importante in questi giorni poiché i layout a larghezza fissa stanno diventando molti più commenti: i browser sono in grado di ingrandire la pagina web per vedere un testo di piccole dimensioni e la larghezza fissa rende molto più facile controllare la tipografia di una pagina, per esempio imposta la larghezza (in ems) per visualizzare le nove parole ideali per riga indipendentemente dalla dimensione del carattere e dall'ingrandimento che l'utente sceglie.

Scusate se non suona come una risposta, ma in sostanza sta suggerendo di scartare questo vecchio modello e prendere in considerazione il passaggio a colonne a larghezza fissa (che è un argomento completamente nuovo).

Answer 8

Sono stato in grado di risolverlo con un po 'di javascript per scorrere il corpo nella posizione in cui è stato fatto scorrere l'elemento nascosto di overflow.

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