在HTML / CSS页面布局挑战

Question

我正在制作一个web应用程序。这个应用程序使用Bootstrap, AngularJS和Snap.js。我只是想设置我的应用程序的基本布局和抽屉。然而，我似乎不能让抽屉正常工作。我试图创建一个网站，看起来像以下:

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

当用户单击[toggle]按钮时，我想切换(折叠或展开)带有导航项的区域。该区域不应覆盖主要内容。相反，它应该在膨胀时把它推到右边。横幅不应该移动。为了做到这一点，我使用了snap.js和angular snap。目前，我有以下HTML，可以在这个小提琴中使用:

<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. 导航区不会展开和折叠。这就像导航项保持固定位置，只有主要内容移动。

谢谢你的帮助。这里可以再次看到小提琴

Answer 1

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

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