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%;}
我被困住了，建議我做一些好的（適當的）方法。