Липкий верхний div с абсолютным позиционированием - PullRequest
7 голосов
/ 30 ноября 2011

Я использую абсолютное позиционирование, чтобы div заполнял все окно браузера. Однако я не хочу сочетать это с липким div, который иногда есть, а иногда нет.

Чтобы сделать вещи немного понятнее, проверьте jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/

Я хочу, чтобы "top", "left" и "subheader" всегда оставались там, где они есть. Я также хочу, чтобы div "content" заполнил то, что осталось от окна. Тем не менее, иногда я хочу отобразить div «alert» перед «content». Пока все хорошо, как вы можете видеть в jsFiddle. Но я хочу, чтобы «alert» придерживался «subheader» и оставался там при прокрутке. Как вы можете видеть, если вы измените размер окна, «оповещение» теперь будет прокручиваться вместе с «контентом» - я не хочу, чтобы это было.

Кто-нибудь получил представление о том, как решить эту проблему?

EDIT: Я сделал изменение в моем jsFiddle, я поместил «предупреждение», где оно должно быть (между подзаголовком и областью содержимого). Как вы можете видеть (http://jsfiddle.net/henrikandersson/aDdRS/12), он не сдвигает «область содержимого» вниз, так как область содержимого имеет вершину: 20 пикселей. И я не могу установить top: 40px, например, так как «alert» должен иметь возможность различаться по высоте, и я хочу, чтобы область содержимого имела одинаковые css с или без предупреждения выше.

РЕДАКТИРОВАТЬ # 2: Этот вопрос касается той же проблемы, но и для этого вопроса нет решения. Похоже, это невозможно без использования JavaScript: Элемент прокрутки с переменной высотой, расположенный относительно элемента с переменной высотой

Ответы [ 5 ]

7 голосов
/ 18 июня 2018

2018-6-18

Я выбираю способ CSS с помощью position: sticky.

, что https://github.com/abouolia/sticky-sidebar.
не работает для меня (я использую Vue.js 2.0 SPA с vue-router & vuex)

Я также хочу элементposition: absolute сначала
, а затем position: sticky

Решение

  1. родительский элемент HTML использует position: absolute, чтобы иметь правильную позицию.

(не забудьте установить height для родителя. Например height:100%)

дочерний элемент HTML position: sticky

у меня работает.enter image description here

enter image description here

4 голосов
/ 30 ноября 2011

изменить
обновить с некоторыми улучшениями
http://jsfiddle.net/aDdRS/11/


первое сообщение
Почему бы не прокрутить только .content, а не .content-area

http://jsfiddle.net/aDdRS/8/

1 голос
/ 30 ноября 2011

Предупреждение прокручивается с контентом, потому что он находится внутри области контента, которая имеет overflow-y: auto.

Переместите его из области содержимого (поместите его между подзаголовком и областью содержимого) и удалите атрибуты position: absolute (и верхний / левый / правый / нижний) из содержимого. В этом примере я не вижу причин для абсолютного позиционирования контента, нормальный поток поместит его туда, где он хочет.

0 голосов
/ 23 сентября 2012

В конце концов, я решил использовать подход JavaScript.Я бы предпочел чистый подход CSS, но моя потребность в поддержке IE8 помешала.Этот ответ от Майлза Грея - почти то же, что я сделал - https://stackoverflow.com/a/4933509/940517

0 голосов
/ 30 ноября 2011
  • Добавить фиксированную высоту и ширину 100% к предупреждению + позиция: фиксированная
  • Добавить padding-top к содержимому
  • Только падение, конечно, является дополнительным дополнением, если нет предупреждения ...

См. http://jsfiddle.net/aDdRS/5/

...