我正在使用这个菜单https://codepen.io/StephenScaff/pen/bVbEbJ，它工作得很好，但我有一个问题，试图添加一个div来覆盖屏幕的其余部分.
I'm trying to achieve this:
Div应该随屏幕调整大小.
当我在HTML中的菜单后面添加div时，结果是部分div隐藏在菜单后面，或者全部显示在菜单后面的屏幕上.
我简单地加了<div>Main Page</div>
谁能解释一下我做错了什么，怎么做？
谢谢
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
body {
font-family: "Lato";
font-size: 100%;
overflow-y: scroll;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background-color: #fefefe;
}
a {
text-decoration: none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}
a:hover {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.app {
height: 100vh;
}
/* -------------
Sidebar
----------------*/
.sidebar {
position: absolute;
width: 17em;
height: 100%;
top: 0;
overflow: hidden;
background-color: #19222a;
-webkit-transform: translateZ(0);
visibility: visible;
-webkit-backface-visibility: hidden;
}
.sidebar header {
background-color: #09f;
width: 100%;
display: block;
padding: 0.75em 1em;
}
/* -------------
Sidebar Nav
----------------*/
.sidebar-nav {
position: fixed;
background-color: #19222a;
height: 100%;
font-weight: 400;
font-size: 1.2em;
overflow: auto;
padding-bottom: 6em;
z-index: 9;
overflow: hidden;
-webkit-overflow-scrolling: touch;
/* -------------
Chev elements
----------------*/
/* -------------
Nav-Flyout
----------------*/
/* -------------
Hover
----------------*/
}
.sidebar-nav ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
.sidebar-nav ul li {
margin-left: 0;
padding-left: 0;
display: inline-block;
width: 100%;
/* -------------
Sidebar: icons
----------------*/
}
.sidebar-nav ul li a {
color: rgba(255, 255, 255, 0.9);
font-size: 0.75em;
padding: 1.05em 1em;
position: relative;
display: block;
}
.sidebar-nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.9);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.sidebar-nav ul li i {
font-size: 1.8em;
padding-right: 0.5em;
width: 9em;
display: inline;
vertical-align: middle;
}
.sidebar-nav > ul > li > a:after {
content: "";
font-family: ionicons;
font-size: 0.5em;
width: 10px;
color: #fff;
position: absolute;
right: 0.75em;
top: 45%;
}
.sidebar-nav .nav-flyout {
position: absolute;
background-color: #080D11;
z-index: 9;
left: 2.5em;
top: 0;
height: 100vh;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .nav-flyout a:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-nav ul > li:hover .nav-flyout {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}<section class="app">
<aside class="sidebar">
<header>
Menu
</header>
<nav class="sidebar-nav">
<ul>
<li>
<a href="#"><i class="ion-bag"></i> <span>Shop</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-color-filter-outline"></i>Derps</a>
</li>
<li>
<a href="#"><i class="ion-heart-broken"></i>Beat</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-settings"></i> <span class="">Controls</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-alarm-outline"></i>Watch</a>
</li>
<li>
<a href="#"><i class="ion-ios-cog-outline"></i>Grinder</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-briefcase-outline"></i> <span class="">Folio</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-flame-outline"></i>Burn</a>
</li>
<li>
<a href="#"><i class="ion-ios-navigate-outline"></i>Ghostface</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-analytics-outline"></i> <span class="">Graphicals</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-timer-outline"></i>Timers</a>
</li>
<li>
<a href="#"><i class="ion-ios-game-controller-a-outline"></i>Dork Mfer</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-paper-outline"></i> <span class="">Papers</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-filing-outline"></i>File Cab</a>
</li>
<li>
<a href="#"><i class="ion-android-star-outline"></i>Shop</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-navigate-outline"></i> <span class="">Ass Finder</span></a>
<ul class="nav-flyout">
<li>
<a href="#"><i class="ion-ios-flame-outline"></i>Burn</a>
</li>
<li>
<a href="#"><i class="ion-ios-navigate-outline"></i>Ghostface</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="ion-ios-medical-outline"></i> <span class="">Cocaine</span></a>
</li>
</ul>
</nav>
</aside>
</section>
<div style='border: 1px solid red'>Main Page</div>