基本的畫布外滾動條和內容顯示帶寬主要內容

當主顯示區域中的內容過寬時，我遇到了試圖使用Foundation 6.2.0的非畫布功能的問題。在大多數情況下，內容將會換行，但是如果你顯示的內容不能換行（比如表格或圖像），我希望屏幕底部的水平滾動條可以讓我側身滾動揭示其餘內容。基本的畫布外滾動條和內容顯示帶寬主要內容

這似乎並非如此，並且該內容是隱藏的。

此外，如果主面板的內容超過了屏幕，並且您使用的是從屏幕右側滑入的偏移畫布，則此面板的內容將隱藏在我的覆蓋層中主面板在滑動右面板時打開。

我已經linked a JSFiddle showing this problem因爲它呈現，因爲我在瀏覽器中看到它。我一直無法讓Stack Overflow代碼運行器正常工作。使用底部的滾動條和「右」按鈕來顯示兩個問題。

有沒有人知道如何獲得基礎，以適應佈局時，主容器的內容比屏幕寬，無法包裝？

$(document).foundation();

<div class="off-canvas-wrapper"> 
 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
 

 
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>abcd</div> 
 
    <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">abcd</div> 
 

 
    <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">top</div> 
 
    <div class="off-canvas-content" data-off-canvas-content> 
 
     <div class="wrap"> 
 
     <main> 
 
      <aside> 
 

 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <button type="button" class="button" data-toggle="offCanvasLeft">Left</button> 
 
      <button type="button" class="button" data-toggle="offCanvasRight">Right</button> 
 
      </aside> 
 

 
      <article style="overflow-x:scroll;overflow-y:auto;"> 
 
      <div class="row" id="primary_nav"> 
 
       <p>Title</p> 
 
      </div> 
 
      <div class="row" id="secondary_nav"> 
 
       <div class="large-12 columns"> 
 
       <div> 
 
        <ul> 
 
        <li><a href="#/menu1" class="active">Menu1</a></li> 
 
        <li><a href="#/menu2">Menu2</a></li> 
 
        <li><a href="#/menu3">Menu3</a></li> 
 
        </ul> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="large-8 columns" id="container"> 
 

 

 
       <table style="width:5000px;"> 
 
        <tr> 
 
        <td> 
 
         This is an example of a page which shows the Foundation off-canvas behavior. Only it contains content which exceeds the horizontal with of the display. I'd expect the scroll-bar at the bottom of the pane to match the content of the middle panel so tha 
 
         scrolling would reveal the content. I'd also expect sliding the right panel out to adjust for the extended width of the center panel. This doesn't seem to be the case. 
 
        </td> 
 
        </tr> 
 
       </table> 
 

 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 
       <br/>efwpihfgwofgwofgogfow3gfow 
 

 

 
       </div> 
 
      </div> 
 
      </article> 
 

 
     </main> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2016-04-26 Dave

添加overflow:auto;在CSS類.wrap和HTML格式的article標籤去除style="overflow-x:scroll;overflow-y:auto;"。我希望這有幫助。

來源

2016-04-26 20:10:03 Sumac

基本的畫布外滾動條和內容顯示帶寬主要內容

回答

相關問題