css - HTML/CSS 页面中的布局挑战

Question

我正在开发一个网络应用程序。此应用程序使用 Bootstrap、AngularJS 和 Snap.js。我只是想设置我的应用程序的基本布局和抽屉。但是，我似乎无法让抽屉正常运行。我正在尝试创建一个如下所示的网站:

+---------------+-------------------------------------+
+ Hello                                               | 
+---------------+-------------------------------------+
| Nav Item 1    | Main content here                   |
| Nav Item 2    | [toggle]                            |
| Nav Item 3    |                                     |
|               |                                     |
|               |                                     |
|               |                                     |
|               |                                     |
|               |                                     |
|               |                                     |
+---------------+-------------------------------------+

当用户单击 [切换] 按钮时，我想切换(折叠或展开)带有导航项的区域。该区域不应涵盖主要内容。相反，它应该在扩展时将其向右推。横幅不应移动。为了尝试这样做，我使用了 snap.js 和 Angular 捕捉。目前，我有以下 HTML，可以在 this fiddle 中使用:

<div ng-controller="MyCtrl">
    <header class="header fixed-top clearfix" style="left:0px; right:0px; z-index:5000;" role="navigation">
        <div style="float: left; background-color:black; color:white;">
            <a href="/">Hello</a>
        </div>
    </header>

    <main>
        <aside>
            <snap-drawer style="background-color:red; width:240px;">
                <br /><br /><br /><br /><br />
                I'm the navigation!
            </snap-drawer>
        </aside>

        <snap-content id="page-content" snap-id="pageContent">
            <br /><br /><br /><br /><br />

            Main content here
            <button snap-toggle="">Toggle</button>
        </snap-content>
    </main>
</div>

出于某种原因，我的主要内容总是位于导航内容之上。此外，导航项和主要内容实际上并不在横幅下方。它就像横幅位于内容之上。据我所知，我有两个我认为相关的问题。但是，我无法弄清楚核心问题。这两个问题是:

1. 导航和内容未位于横幅下方。就像横幅漂浮在导航和内容之上。
2. 导航区域不会展开和折叠。就像导航元素保持固定位置，只有主要内容移动。

感谢您的帮助。再次可以看到 fiddle here .

Answer 1

这是你需要的，希望这对你有用。

http://fiddle.jshell.net/6yx8h/1/