web-dev-qa-db-ja.com

Foundation 5オフデバイス全高

私は Foundationのキャンバス外ナビゲーション を使用して、デバイスの高さ全体を占めるナビゲーションを作成しようとしています。

デフォルトでは、メニューオプションの高さは、表示されるコンテンツの高さによって決まります。つまり、コンテンツがメニュー項目の高さよりも低い場合、メニュー項目は非表示になります。

メニューとコンテンツセクションの高さの両方をデバイスの高さに固定してください。必要に応じて、コンテンツセクションのみをスクロールします。

コンテンツ領域の高さと最小高さを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>
htmlcsszurb-foundation
26
willdanceforfun

これが機能するかどうかを試し、最初に<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 100％までの高さ。そしてそれは

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

これは私が見つけた最良の方法であり、そのかなり単純でハックではありません
[〜＃〜]注[〜＃〜]：これは一部のcss3ブラウザ。 互換性のあるブラウザー

Sassバージョン：

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

CSSバージョン：

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

編集：

Foundation 6サイトのバージョン

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

私は同じ問題を抱えていましたが、これが私がやったことです：

私は.off-convas-wrapper、.inner-wrapperをメインコンテンツの脇に置き、.right（left）-off-canvas-toggleを体の内部で使用するだけで問題は解決しました。この方法で私はもう内容を必要としません。

ところで、内側のラッパータグを閉じる前に、メインコンテンツの最後に.exit-off-canvasを置​​きます

1
ehsan

私はJSを少しハックする必要がありましたが、コンテンツがブラウザー/デバイスの高さよりも高いか、100％の高さにプッシュしないかによって、問題が発生することがわかりました。これが私の推奨する修正です： https://github.com/zurb/foundation/issues/38

0
Larron