Липкий верхний div с абсолютным позиционированием

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

Чтобы прояснить ситуацию, ознакомьтесь с этим jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/

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

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

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

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

Ответ 1

В конце концов, я выбрал подход JavaScript. Предпочитал бы чистый подход CSS, но моя потребность в поддержке IE8 мешала. Этот ответ от Myles Grey в значительной степени я сделал - fooobar.com/questions/881256/...

Ответ 2

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%)

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

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

enter image description here

Ответ 4

  • Добавить фиксированную высоту и ширину 100% для предупреждения + позиция: фиксированная
  • Добавить дополнение к контенту
  • Только падение - это, конечно, дополнительное дополнение, если нет предупреждения...

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

Ответ 5

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

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

Ответ 6

Используйте float: left; и ширина: 0;, и вы можете использовать transform: translateX (xxx); для установки левой позиции.

Задача решена :)