Milligram: Как сдвинуть другие элементы вправо с помощью боковой панели?

Созданный на 27 окт. 2017 · 5Комментарии · Источник: milligram/milligram

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

Демо Codepen

Как видите, моя боковая панель - это следующий элемент

<div class="sidebar"></div>

со следующими стилями:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

Так работает, боковая панель появляется над всем остальным, но все остальное не отодвигается в сторону. А если экран маленький, контент конфликтует с боковой панелью.

Как сделать так, чтобы боковая панель сдвигала все остальное (включая панель навигации) вправо на 250 пикселей (ее ширина)? Я знаю, что это сделает вещи непригодными для использования на небольших экранах, но я дам пользователю возможность переключать его.

Hacktoberfest help wanted

Источник

fooksupachai

👍1

Все 5 Комментарий

Я тоже обнаружил эту проблему. Надеюсь, кто-то поможет с этой проблемой.

abc985 14 дек. 2017

Не совсем проблема с фреймворком. По сути, вам нужна боковая панель вне холста. Я изменил ваш Codepen, чтобы он работал: https://codepen.io/chillyorange/pen/EQYJvQ

Применил фиксированное позиционирование к боковой панели и заключил содержимое в дополнительный элемент с левым полем, соответствующим ширине боковой панели.

chillyorange 29 янв. 2018

👍1

Ответ @chillyorange «s Шоуда решить вашу проблему.

Фиксированные элементы не прокручиваются вниз. Таким образом, ваша боковая панель будет иметь 100% высоту, как вы хотите.

umitkucuk 29 янв. 2018

@fooksupachai Я могу вам помочь!

Если вы определите position: absolute этот элемент будет перекрывать другие. Вы можете попробовать использовать сетку миллиграмм, чтобы добиться ожидаемого поведения.

Сетка миллиграмм:

Свойство CSS позиции:

Дайте мне знать, если у вас возникнут какие-либо вопросы о том, как использовать сетку миллиграмм .

cjpatoilo 7 февр. 2018

👍1

@fooksupachai, а пока
Если вам нужна помощь, не стесняйтесь снова открывать или открывать новый выпуск.

cjpatoilo 19 мая 2020

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

Размеры заголовков необходимо скорректировать.

garretwilson · 18Комментарии

CDN-ссылка не работает

swalberg · 6Комментарии

Запрос функции: вертикальный помощник allign

neronmoon · 4Комментарии

Легко изменить цвет подсветки (#9b4dca)

mterron · 6Комментарии

Предупреждение Chrome [Устарело] Использование неэкранированных символов «#» в теле URI данных устарело и будет удалено в M67 примерно в мае 2018 г. Используйте вместо этого «% 23». См. Https://www.chromestatus.com/features/5656049583390720 для получения дополнительных сведений.

mukai11 · 4Комментарии