我正在为我的网站设计广告管理面板,首先我在 Wrapper 中有一个顶部导航栏,然后我还有 2 个 div。
1.对于侧面导航菜单(左侧)
2.其余页面内容(右侧)
我希望侧边导航菜单覆盖整个屏幕高度。但不知何故我没有做到这一点,我尝试了以下尝试。
第一次尝试(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 更改为 position:absolute 然后出现了一个新问题, side bar navigation collapse half of the height of the current screen height with a scroll bar
html 和 body 的 CSS 代码
html , body{height:100%;}
我被卡住了,建议我一些好的(正确的)方法。
最佳答案
我认为您可以删除侧边栏的绝对定位或固定定位。
只需将其设置为 float: left;
,保持当前宽度 (20%)。
然后,对于您的 .mainPageContent
,将其设置为 float: right;
并使用 padding-left 和内容的宽度填充“%”中的宽度.
然后,对于高度,我使用 min-height: 100vh;
保证填满屏幕的所有高度(vh = View 高度)并且得到浏览器的很好支持。
因此,您可以在侧边栏上设置 min-height: 100vh;
,我认为它可以解决问题。
希望对您有所帮助!
关于html - 制作高度为 100% 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39804048/