基础5设备的非帆布全高 [英] Foundation 5 off-canvas full height of device

问题描述

我正在使用基金会的画外导航，试图制作一个导航占据了设备的整个高度。

默认情况下，菜单选项的高度由所显示内容的高度决定。这意味着如果你的内容小于菜单项的高度，你的菜单项将不可见。

我喜欢菜单和内容的高度部分固定在设备的高度。

将内容区域的高度和最小高度设置为100％似乎没有任何影响 - 只能使用固定的高度，例如500px将改变高度 - 但这是不可扩展的。

如何实现？

如果我给''包裹'一个固定的高度，整个事情会调整。我怎样才能确定。内置包装是否需要设备的整个高度？

 < 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>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
 
< / ul> 
< / aside> 
 
< section class =main-section> 
< div class =section-inner> 
< p>等等等等< / p> 
< p>测试< / p> 
< / div> 
< / section> 
 
< a class =退出画布>< / a> 
 
< / div> 
 
< / div> 
  

解决方案

$ c>< div class =off-canvas-wrap> in another div

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

然后设置下面的css，

  body，html {
 height：100％; 
宽度：100％; 
} 
 
 .off-canvas-wrap，.inner-wrap {
 height：100％; 
 
 
 
 
 
 $ b 
如果你想阻止滚动，对于聊天客户端来说，设置 .page 身高至100％。那就是 
 
 
  body，html {
 height：100％; 
宽度：100％; 
} 
 .off-canvas-wrap，.inner-wrap {
 height：100％; 
} 
 .page {
 height：100％; 
} 
  
 
I'm using Foundation's off-canvas navigation, attempting to make a navigation that takes up the full height of the device. 


By default, the height of the menu options are determined by the height of the content being shown. This means if your content is less than the height of the menu items, your menu items will be invisible.

I would like both the menu, and the height of the content section to be fixed at the height of the device. With only scrolling in the content section if needed.

Setting the height, and min-height of content area to 100% doesn't seem to have any effect - only using a fixed height e.g. 500px will change the height - but then this isn't scalable.

How is this achieved?

If I give '.inner-wrap' a fixed height, the whole thing will adjust. How can I make sure .inner-wrap takes the full height of a device? 
<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>

解决方案
Try if this works, first enclose the <div class="off-canvas-wrap"> in another div
<div class="page">
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
         [..]
        </div>
    </div>
</div>
And then set the following css,
body,html{
    height:100%;
    width:100%;
}

.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
If you want to block scrolling, say for a chat client, set .page height to 100%. And that would be
body,html{
    height:100%;
    width:100%;
}
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
.page{
    height:100%;   
}


                        
这篇关于基础5设备的非帆布全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！