Блог

Главная - Вопросы по программированию - CSS — исправлена ошибка в позиции материализации столбцов

CSS — исправлена ошибка в позиции материализации столбцов

#html #css #materialize

#HTML #css #материализовать

Вопрос:

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

Я использовал пример, приведенный в документе Materialize .

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

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

введите описание изображения здесь

Если я удалил fixed:position I, имеющий этот результат: введите описание изображения здесь

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

 <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 на всей высоте экрана и мое тело, которое правильно остается внутри столбцов, которые я определил с помощью materialize?

Ответ №1:

добавьте этот класс для правой боковой секции 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/