Привязка, отсекающая страницу на основе высоты элемента с абсолютным расположением

#html #css

#HTML #css

Вопрос:

При нажатии на привязку, она отрезает часть страницы. Насколько я могу судить, это происходит во всех браузерах.

Если вы перейдете к этой скрипте и нажмете на ссылку вверху, вы заметите, что не можете прокрутить страницу до верха страницы. Фактически часть страницы была удалена.

Есть пара вещей, которые вызывают это, но я не знаю, почему они это делают. Если вы удалите overflow: hidden из .bodyContent , то он не будет вести себя таким образом. Кроме того, вы заметите, что расстояние обрезки в точности равно значению top: XXpx on .stuff . Таким образом, настройка top: 0px также решит проблему.

Проблема в том, что для конкретного дизайна, над которым я работаю, ни один из этих вариантов не является, поскольку элемент должен располагаться сверху, а родительский элемент должен быть скрыт переполнением. Но что более важно, почему это происходит, и особенно почему это происходит во всех браузерах… кажется, что это почти по дизайну.

1. Если вы подразумеваете под «прокруткой до верха», что после щелчка вы не можете прокручивать рамку «до верха» (или вверх), по крайней мере, в FF7 (и Chrome) Я могу это сделать. Однако зеленый цвет исчезает.

2. потому что внутри overflow:hidden элемента происходит прокрутка, и из-за hidden части полосы прокрутки не отображаются.

3. Но почему внутри скрытого переполнения происходит прокрутка? Почему прокрутка не происходит на самой странице?

4. Просто для справки, здесь немного полезной информации positioniseverything.net/articles/onetruelayout/appendix/… Также содержит тест, чтобы увидеть, произойдет ли это.

Ответ №1:

Если вы удалите height:100%; и замените его на bottom:0; , это сработает, потому что высота с установленными верхом и низом затем определяется заключающим контейнером — это интересная ошибка, но этот обходной путь выполнит свою работу.

1. Ага. Вот и все. Ваша идея использовать позиции для растягивания элемента на самом деле идеально приближает его размер к родительскому элементу, даже допуская границы полей и отступов, которые при использовании height: 100% или width: 100% вызывают проблемы, поскольку они переполняются без этого. jsfiddle.net/NwM6z/1 . Очень хорошая находка.