基本的画布外滚动条和内容显示带宽主要内容

当主显示区域中的内容过宽时，我遇到了试图使用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

基本的画布外滚动条和内容显示带宽主要内容

回答

相关问题