Как зафиксировать элемент (запретить скролл) без position:fixed?

Question

K G @pwnography

Как зафиксировать элемент (запретить скролл) без position:fixed?

Здравствуйте, столкнулся с такой проблемой. Есть сайдбар, который занимает 2 колонки и контент который занимает 10 колонок. Этот сайдбар растянут на всю высоту экрана и должен быть зафиксирован, скроллиться должен только контент. При position:fixed сайдбар, соответственно, выпадает из потока и сетка ломается. Нужно какое-то решение, чтобы и сайдбар и контент видели друг-друга (располагались по сетке) и в то же время, чтобы сайдбар был зафиксирован.

Вопрос задан более трёх лет назад
1085 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 3

Комментировать

4 комментария

Сергей Горячев @webirus

<body>
<div class="row no-margin">
<section class="sidebar_wrap col-md-3">
   <aside class="sidebar col-md-3">
   </aside>
</section>
<main class="page-main col-md-9">
</main>
</div>
</body>

Сайдбар кстати это не секция, а aside.

.sidebar {
   position: fixed;
}

Вот так будет правильней.

Написано более трёх лет назад

K G @pwnography Автор вопроса

попробую, в моем случае это не aside)

Написано более трёх лет назад
K G @pwnography Автор вопроса

Sergey не работает

Написано более трёх лет назад
Сергей Горячев @webirus

pwnography: А может вы покажете полный код? У меня например работает)

Написано более трёх лет назад

3 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 5 часов назад
- 33 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 16 часов назад
- 81 просмотр
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 72 просмотра
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 81 просмотр
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1153 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 84 просмотра
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 97 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Answer 1 · 2016-03-06 15:44:44

Алексей A @allewa

Полагаю, что так:
jsfiddle

UPD: ответ Сергей в комментариях более лаконичный и правильный jsfiddle.

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2016-03-06 15:22:19

Хреново значит сверстано, раз распадается.
Под сайдбар положите див, чтобы не распадалось.
А его фиксируйте уже.
Либо пересмотреть правила для контента.

Answer 3 · 2016-03-06 15:28:21

K G @pwnography Автор вопроса

Sergey Что здесь не так сверстано?

<body>
<div class="row">

<section class="sidebar col-md-3">
 </section>

<main class="page-main col-md-9">
</main>

</div>
</body>

Ответ написан более трёх лет назад

4 комментария

Answer 4 · 2016-03-06 15:29:18

Самый простой вариант - третьей колонке (первой колонке контента) задать отступ от левого края равный ширине сайдбара. Ситуация очень абстрактно описана, сложно посоветовать готовое и рабочее решение.

Как зафиксировать элемент (запретить скролл) без position:fixed?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт