CSS - фиксированная позиция - PullRequest
Новая
       3

CSS - фиксированная позиция

0 голосов
/ 11 апреля 2019

Я хочу создать тип меню sidenav для большого и среднего экрана, используя Materialize.

Я использовал пример в Материализация документа .

это работает, это круто!

Но дело в том, что я хочу, чтобы мой Sidenac был на всю высоту экрана. Я пробовал несколько вещей. Я нашел Soluce, используя Fixed:position; внутри моего CSS, он помещает sidenav на всю высоту, но нарушает систему Materialize Columns.

enter image description here

Если я удалил fixed:position, у меня был такой результат: enter image description here

У меня есть это на теле: 

<body>

<nav>
    <!-- Top Navabar -->

</nav>

<div class="row">

 <div class="col s12 m4 l2 red" id="sidenav"> 
   <ul class="menu">
     <!--Sidenav content-->
   </ul>
   </div>


    <div class="col s12 m8 l10">
    <div class="row">
        <div class="col s12 m12 l12">
            <!-- Body Content-->
    </div>
    </div>

</div>

Мой CSS выглядит так: 

#sidenav{
  min-height: 100%;
  position: fixed;
  z-index: 999;
  background-size: 100%;
}

Вы можете получить полный код здесь: https://jsfiddle.net/pq19g3t2/

Итак, как я мог разместить мой sidenav на всей высоте экрана, и мое тело было бы правильно внутри столбцов, которые я определил с помощью материализации?

1 Ответ

0 голосов
/ 11 апреля 2019

добавить этот класс для правой части push-m4 push-l2 изменить медиа-запрос ширины CSS, например 

#sidenav{

  background-size: 100%;
}
@media(min-width:601px){
  #sidenav{
   min-height: 100%;
  position: fixed;
  z-index: 999;
  }
}

<div class="col s12 m8 l10 push-m4 push-l2">
  <div class="row">
     <div class="col s12 m12 l12">
        <!-- Body Content-->
  </div>
</div>

https://jsfiddle.net/qoxjb1yh/

...