Почему страница переместилась вверх с контейнером с переполнением: скрытым?

У меня возникла проблема, которая действительно странная. Это в каждом браузере.Почему страница переместилась вверх с контейнером с переполнением: скрытым?

Все работает правильно, пока вы не попытаетесь перейти в раздел с использованием хэш (как #contactUs на моей странице) ... попробовать этот URL: http://mahersalam.co.cc/projects/2011/#contactUs

Вы увидите, что СМЕННОСТЬ страница 10px к Вверх. если вы снимаете хэш, он работает снова.

У меня есть обертка на странице (#container), которая имеет переполнение: скрыто, я сделал это, чтобы убедиться, что полосы прокрутки не отображаются, если смена разрешения. Если вы удалите свойство переполнения, оно тоже работает.

Я предполагаю, что перемещение происходит через место полосы прокрутки, но поскольку оно скрыто, это место остается.

Так кто знает, как исправить эту проблему?

Edit:

Я нашел решение, и я записал его в anwsers.

источник

2010-06-13 Maher4Ever

Раствор для удаления height:100% от .rightCol и .leftCol.

Я думаю, что эти разделы были переполнены из-за свойства высоты.

источник

2010-06-14 00:36:55 Maher4Ever

Это уверенность в эстетическом оформлении. Очень хорошо.

Anywho, переполнение, кажется, берет кусок из верхнего края #headerWrap и добавляет его в нижней части страницы для меня, это ровно 16 пикселей.

Ничего из того, что я пробовал, до сих пор работало. Можете ли вы получить его так, чтобы #container не переливался горизонтально?

Редактировать: неважно; следующее не работает ...
Изменение #container «s стиль от overflow: hidden; до overflow-y: hidden; кажется работать на Firefox не очень надежным решением.

источник

2010-06-13 22:43:53

Спасибо вам за ваши добрые слова. @Brock: Я пытался остановить переполнение страницы при нажатии, но я не знаю, что именно переполнено.Это не только #headerWrap. Это странная проблема ... Я разработал несколько макетов, но на этот раз эта проблема происходит без причины. Есть ли у вас какие-либо предложения, которые помогут устранить проблему или даже остановить ее из ее корня? Еще раз спасибо. – Maher4Ever

Это * выглядит * как нижний колонтитул, 'leftCol' и' rightCol' вызывают горизонтальное переполнение. Убивать маржу | padding-left | right похоже на проспект, который стоит преследовать. Но почему-то «# footerWrap» по-прежнему переполняется. Дайте ему максимальную ширину около 75 м, может помочь. –

Благодарим вас за помощь и время. После дополнительных тестов кажется, что высота: 100% от leftCol и rightCol исправляет проблему. Я признаю, что это странно, потому что это происходит только при щелчке по URL. Во всяком случае, спасибо. – Maher4Ever

Я считаю, что проблема заключается в том, что идентификатор фрагмента заставляет контейнер прокручиваться до прокрутки страницы. После завершения страницы элемент контейнера имеет значение scrollTop «16».

Вот что я сделал в greasemonkey в Firefox, чтобы восстановить недостающую область.

window.addEventListener('scroll', 
    function(e) 
    { 
    var cont = document.getElementById("container"); 
    if (cont.scrollTop > 0) cont.scrollTop = 0; 
    }, 
    false);

Что произойдет, когда вы прокрутите страницу назад, появится пробел.

В качестве решения, мне не нравится это вообще, но это показывает, где ваша проблема лежит и, возможно, другие могут думать о более чистого способа крепления scrollTop контейнера 0.

источник

2010-06-14 00:12:19 Alohci

Если я получу это право, это означает, что ошибка в том, как браузеры справляются с подобными ситуациями, правильно? – Maher4Ever

@ Maher4Ever - я не знаю какой-либо спецификации, которая фактически охватывает, как прокрутка браузера распространяется, когда цель идентификатора фрагмента находится внутри вложенных прокручиваемых элементов. Однако, похоже, на самом деле существует консенсус между разработчиками браузеров, поэтому я думаю, что мы должны рассматривать его как функцию, а не ошибку. – Alohci

Почему страница переместилась вверх с контейнером с переполнением: скрытым?

ответ

Смежные вопросы