Question

当主显示区域中的内容过宽时，我在尝试使用Foundation 6.2.0的Off-Canvas功能时遇到了问题。在大多数情况下，内容将换行，但如果您显示无法包装的内容（例如表格或图像），我希望屏幕底部的水平滚动条允许我侧身滚动以显示其余的内容。

这似乎并非如此，而且内容是隐藏的。

此外，如果主面板的内容超出了屏幕，并且您正在使用从屏幕右侧滑入的偏移画布，则此面板的内容将隐藏在我的叠加层中滑动右侧面板打开时的主面板。

我已经linked a JSFiddle showing this problem，因为它会在浏览器中看到它。我还没有能够让Stack Overflow代码运行器正常工作。使用底部的滚动条和＆＃34;右键＃34;按钮显示两个问题。

当主容器的内容比屏幕宽，并且无法包装时，是否有人知道如何让Foundation适应布局？

＆＃13;

$(document).foundation();

＆＃13;

<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>

＆＃13;

Answer 1

在css中为类overflow:auto;添加.wrap，然后从html中的style="overflow-x:scroll;overflow-y:auto;"标记中删除article。我希望这会有所帮助。

基础画布外滚动条和内容显示，具有广泛的主要内容

1 个答案: