HTML / CSS页面中的布局挑战

Question

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

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

当用户单击 [切换] 按钮时，我想切换（折叠或展开）带有导航项的区域。该区域不应涵盖主要内容。相反，它应该在扩展时将其推向右侧。横幅不应移动。为了尝试做到这一点，我正在使用 snap.js 和 angular snap。目前，我有以下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. 导航区域不会扩展和折叠。就像导航项目保持固定位置，只有主要内容移动。

感谢您的帮助。再次可以看到小提琴here。

Answer 1

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

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