Гибкий HTML-виджет в стекеCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Гость
 Гибкий HTML-виджет в стеке

Сообщение Гость »


Я установил виджет как прикрепленный с помощью HTML, но он не работает как прикрепленный. Когда прокрутка опускается, виджет опускается. Структура, которую я хочу создать

Заголовок прикрепленный заголовок страницы содержимое страницы/прикрепленный виджет Я ни в коем случае не хочу использовать фиксированный.

Я хотел показать с помощью фотографий именно то, что я хотел сделать. Я ценю вашу помощь


Изображение


body { маржа: 0; заполнение: 0; } .flex-контейнер { дисплей: гибкий; гибкое направление: столбец; высота: 100вх; } .header { цвет фона: #f39c12; высота: 60 ​​пикселей; переполнение: скрыто; } .содержание { дисплей: гибкий; гибкий: 1; переполнение: авто; } .main-контейнер { максимальная ширина: 1000 пикселей; маржа: авто; гибкий: 1; дисплей: гибкий; гибкое направление: столбец; положение: относительное; } .sticky-element { положение: липкое; верх: 0; цвет фона: #ecf0f1; } .sticky-виджет { положение: липкое; верх: 0; цвет фона: #3498db; цвет: #fff; отступ: 10 пикселей; } .основное содержание { дисплей: гибкий; гибкое направление: строка; } .столбец { гибкий: 1; отступ: 20 пикселей; } .footer { цвет фона: #2ecc71; высота: 40 пикселей; Заголовок ЗАКЛЕЙКА НАЗВАНИЯ страницы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce actor augue vel mi congue, vel pharetra arcu bi ВИДЖЕТ Нижний колонтитул
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»