Основание 5 на холсте полная высота устройства

Я использую Foundation off-canvas navigation, пытаясь сделать навигацию, которая занимает всю высоту устройства.

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

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

Установка высоты и минимальной высоты области содержимого до 100%, по-видимому, не имеет никакого эффекта - только с использованием фиксированной высоты, например. 500px изменит высоту - но тогда это не масштабируется.

Как это достигается?

Если я дам '.inner-wrap' фиксированную высоту, все это изменится. Как я могу убедиться, что .inner-wrap занимает всю высоту устройства?

<div class="off-canvas-wrap">

  <div class="inner-wrap">

    <nav class="tab-bar">

      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

   </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Label</label></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>

      </ul>
    </aside>

    <section class="main-section">
        <div class="section-inner">
        <p>blah blah</p>
        <p>test</p>
        </div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>

</div>

Ответ 1

Попробуйте, если это сработает, сначала заключите <div class="off-canvas-wrap"> в другой div

<div class="page">
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
         [..]
        </div>
    </div>
</div>

И затем установите следующий css,

body,html{
    height:100%;
    width:100%;
}

.off-canvas-wrap,.inner-wrap{
    height:100%;   
}

Если вы хотите заблокировать прокрутку, скажем, для клиента чата, установите .page height на 100%. И это будет

body,html{
    height:100%;
    width:100%;
}
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
.page{
    height:100%;   
}

Ответ 2

Это лучший способ, который я нашел, и его довольно простой и нехарактерный
ПРИМЕЧАНИЕ: это работает только в некоторых браузерах css3. Совместимые браузеры

Версия Sass:

.off-canvas-wrap {
  .inner-wrap{
    min-height: 100vh;
  }
}

Версия CSS:

.off-canvas-wrap, .off-canvas-wrap > .inner-wrap {
  min-height: 100vh;
}

Изменить:

Версия для сайта 6 сайтов

.off-canvas-wrapper-inner, .off-canvas{
  min-height: 100vh;
}

Ответ 3

У меня были те же проблемы, и это то, что я сделал:

Я помещаю .off-convas-wrapper,.inner-wrapper и в стороне от моего основного содержимого и просто использую .right(left) -off-canvas-toggle внутри моего тела, и моя проблема решена. таким образом, я больше не нуждаюсь в содержимом.

BTW я положил .exit-off-canvas в конце моего основного содержимого для закрытия тега внутренней оболочки

Ответ 4

Мне пришлось немного взломать JS, я обнаружил, что в зависимости от того, когда контент выше высоты браузера/устройства или не достигает 100% высоты, были проблемы. Вот мое рекомендуемое исправление: https://github.com/zurb/foundation/issues/3800