3
我正在为我的网站设计广告管理面板，首先我在封装器中有一个顶部导航栏，之后我还有2个div。制作100％高度的div
1.对于侧边导航菜单（左）的页面内容的
2.对于其余（右侧）
我希望我身边的导航菜单，以覆盖整个屏幕的高度。但不知何故，我没有做到这一点，我已经尝试了以下尝试。
1日尝试（HTML代码）
.mainSideNavBar {
width: 20%;
z-index: 0;
position: fixed;
left: 0;
top: 63px;
height: 100%;
}
.sideNavBar {
width: 100%;
background-color: #303641;
transition: width 0.5s ease;
overflow-x: hidden;
border: 1px solid #454a54;
height: 100%;
}
.mainPageContent {
width: 100%;
height: 100%;
}
.pageContent {
width: 100%;
background-color: #fff;
padding-left: 20%;
transition: width 0.5s ease, padding-left 0.5s ease;
border: 1px solid black;
height: 100%;
}<div class="wrapper">
<div class="mainSideNavBar">
<div class="sideNavBar" id="sideNavBar">
<ul>
<li><a href="#"><i class="fa fa-television"></i><span class="" id="textHideD">Dashboard</span></a>
</li>
<li><a href="#"><i class="fa fa-envelope-o"></i><span class="" id="textHideN">Notifications</span></a>
</li>
<li><a href="#"><i class="fa fa-users"></i><span class="" id="textHideM">Manages Users</span></a>
</li>
<li><a href="#"><i class="fa fa-exchange"></i><span class="" id="textHideB">Bet Management</span></a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o"></i><span class="" id="textHideR">Modify Rules</span></a>
</li>
<li><a href="#"><i class="fa fa-credit-card"></i><span class="" id="textHideP">Payment</span></a>
</li>
</ul>
</div>
<!--End sideNavBar-->
</div>
<!--End mainSideNavBar-->
<div class="mainPageContent">
<div class="pageContent" id="pageContent">
<h1>My Content</h1>
</div>
</div>这段代码的问题是，它的作品完美的，如果在.PageContent类含量大于屏幕高度较小的（没有滚动条），但当.PageContent类中的内容大于当前屏幕高度（显示滚动条）时，左侧导航会显示顶部导航与它自身之间的小间隙，因为（position：fixed）。
以下是截图：
而在我的第二次尝试，我改变我的立场：固定的位置是：绝对的，然后会出现一个新的问题，高度的 侧栏导航坍塌一半当前屏幕高度与滚动条
为HTML CSS代码，和身体
html , body{height:100%;}
我被困住了，建议我做一些好的（适当的）方法。