Como pode um fragmento de URL afetar um layout CSS?

Question

Compare estes 3 URLs (olhada na barra de navegação superior em cada caso):

1. http://fast.kirkdesigns.co.uk/blog
2. como acima, mas com a url fragmento #navigation
3. como acima, mas com a url fragmento # nó-2655

Note que a única diferença é o fragmento de URL no final.

As duas primeiras páginas exibem absolutamente bem (no Firefox, pelo menos). É o terceiro onde as mentiras de problema. O fragmento # nó-2655 empurra o topo navbar fora do topo da tela. Quando você, em seguida, rolar para trás até o topo da página, a barra de navegação tem sido cortado ao meio. Isso acontece quando se usa qualquer fragmento de URL que faz com que a barra de navegação para estar fora da janela inicial quando a página é carregada pela primeira vez.

Assim, como pode utilizar um fragmento de url afetam o layout css como este?!

A solução: como sugerido abaixo, removendo o overflow: hidden no elemento recipiente que continha a barra de navegação corrigiu o problema. Eu adoraria entender porque embora!

Answer 1

Remova o overflow:hidden em #main em css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

Eu diria que é um bug de renderização no FireFox, uma vez que está bem no Opera. Não deve haver qualquer maneira uma âncora mudaria o CSS como você disse (a menos que você estiver usando jQuery ou algo assim).

Answer 3

Eu estou tendo esse problema também, e acho que posso ver o que está acontecendo.

O bloco "coluna" com o (5678 pixel) margem enorme e estofamento faz esse bloco muito alto. Em outras do que o Firefox navegadores, o positivo e os valores negativos anulam mutuamente, mas FF realmente faz com que seja tão alto -. Tipo de

FF também sabe os dois se anulam mutuamente, mas parece olhar para o preenchimento 5678px e decide o bloco de colunas está picando fora a parte inferior do bloco #wrapper. Esta é estouro -. E com o conjunto de excesso de auto on #wrapper, você vê o verdadeiro tamanho do #wrapper com uma-barra de rolagem para baixo do lado

Com o estouro como oculto, FF tira a barra de rolagem, mas ainda parece rolar o conteúdo de #wrapper para que o item os pontos de fragmentos de está no topo da página. Este é um comportamento normal para ligações de fragmentos em blocos de rolagem, mas já que não há barra de rolagem, você não pode rolar o conteúdo de volta para baixo novamente, portanto, parece que o layout foi efectuada pelo fragmento.

Assim, em breve, eu suspeito que FF está operando uma barra de rolagem invisível neste exemplo. Isso poderia ser considerado um erro, mas é provavelmente o comportamento correto. Ser capaz de rolar o conteúdo cima e para baixo dentro de um não-transbordou de tamanho fixo bloco usando fragmentos de URL, é uma técnica que pode ser utilizada de forma eficaz para implementar imagem "sliders" que o trabalho, mesmo na ausência de JavaScript.

Espero que ajude. Este foi me confundindo por anos, e esta explicação repente me bateu para fora do azul. Minha solução atual para isso é usar jQuery "rolagem para" plugin para percorrer toda a página para baixo para o fragmento, como este parece impedir que o conteúdo de #wrapper de rolagem internamente.

Você também pode tomar "display: hidden". Off #wrapper, mas sua página, em seguida, acaba de meia milha de comprimento

Answer 4

Eu vou apenas apontar que pode haver alguma herança estranho dos mais de 30 folhas de estilo vinculadas a na cabeça. Não pode, também, e é provavelmente um bug de renderização (possivelmente relacionadas com :target styling), que Dan sugeriu. Eu apenas senti que vale a pena apontar que, se você tem mais de trinta folhas de estilo, você provavelmente para começar a ver alguma estranheza, tudo o que mais poderia acontecer.

Answer 5

A razão é a coluna com a grande cobertura expandiu-lo do contêiner, mas a expansão é então oculta, mas overflow: hidden; mas com o uso do fragmento que está a ser enrolado para a posição do fragmento, eficaz cortando qualquer coisa acima disso. Você pode usar javascript e definir scrollTop a 0 e deslocá-lo de volta à posição normal.

Basicamente, um caso extremo estranho que navegadores não parecem lidar muito bem.

Answer 6

Infelizmente esta não é uma "resposta", tho é uma resposta a outros comentários aqui. Este problema é apenas espantosa. É muito fácil de isolar (ou seja, não tem nada a ver com o número de folhas de estilo), e não tem uma "solução" adequada porque não há nenhuma maneira de conseguir a prestação desejada.

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

Apenas como uma nota lateral, a técnica acima é geralmente usado para fornecer layouts multilinha-coluna flexível de largura. Isso provavelmente está se tornando menos importante estes dias, como layouts de largura fixa estão se tornando muito mais comentário - navegadores são capazes de ampliar a página da web para ver texto pequeno, e de largura fixa torna muito mais fácil de controlar a tipografia de uma página, por exemplo definir a largura (em ems) para exibir o ideal nove palavras por linha, independentemente de qual o tamanho da fonte e ampliação das escolhe usuário.

Desculpe se isso não soa como uma resposta, mas é, basicamente, sugerindo para descartar este modelo antigo e considerar a mudança para colunas de largura fixa (que é todo um novo assunto).

Answer 8

Eu era capaz de resolver isso com algum javascript para rolar o corpo para a posição do elemento escondido estouro foi rolada para.

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