ホーム>source

XYグリッドがあり、その中にオフセットキャンバスがありますが、XYグリッドの本体にあります。キャンバスの位置を左にオフセットして使用可能なスペースの全高を取得したいのですが、それはしていません。キャンバスのコンテンツの高さに応じて、キャンバスの高さをラップします。したがって、キャンバスの高さは、キャンバスのコンテンツの高さに応じてのみ増加します。 off-canvas-wrapperの高さを100%に設定すると、スクロールが乱れます。 私もこれにコードペンのリンクを添付して、問題をチェックアウトしました。

   <div class="grid-y grid-frame">
    <div class="cell shrink header">
      <button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
      <h1>Grid Frame Header</h1>
    </div>
   <div class="cell auto body">
       <div class="off-canvas-wrapper">
         <div class="off-canvas position-left off-canvas-absolute reveal-for-medium" id="offCanvasLeft" data-off-canvas>
           <button class="close-button" aria-label="Close menu" type="button" data-close>
             <span aria-hidden="true">&times;</span>
           </button>
           <ul class="vertical menu" data-accordion-menu style="max-width: 250px">
                  <li>
                    <a href="#">Item 1</a>
                    <ul class="menu vertical nested">
                      <li>
                        <a href="#">Item 1A</a>
                        <ul class="menu vertical nested">
                          <li><a href="#">Item 1Ai</a></li>
                          <li><a href="#">Item 1Aii</a></li>
                          <li><a href="#">Item 1Aiii</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Item 1B</a></li>
                      <li><a href="#">Item 1C</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Item 2</a>
                    <ul class="menu vertical nested">
                      <li><a href="#">Item 2A</a></li>
                      <li><a href="#">Item 2B</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item 3</a></li>
            </ul>
         </div>
         <div class="off-canvas-content" data-off-canvas-content>
           <p>
             No weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall 
           </p>
         </div>
     </div>
  </div>
  <div class="cell shrink footer">
    <h3>Here's my footer</h3>
  </div>
</div>

ここで私は何を間違えていますか。

CodepenLink

あなたの答え
  • 解決した方法 # 1

    ここで何をしているのか理解できたと思いますが、これにはflexboxを使用できます。

    .off-canvas-wrapper {
       display: flex;
       height: 100%;
       overflow-y: scroll;
     }
    
    

    これにより、スクロールなしでサイドバーが最大の高さになります。 「display:flex」は、子要素の高さを(より良い言葉がないために)互いの高さとは関係なく、むしろ独自の高さにします。

    overflow-yはdivにスクロールバーを提供しますが、高さが可視ウィンドウよりも大きい場合のみです。

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ r - 新しいデータに基づく折れ線グラフを一連の箱ひげ図に追加する