制作100％高度的div

Question

我正在为我的网站设计广告管理面板，首先我在Wrapper中有一个顶级导航栏，之后我还有2个div。

1.侧面导航菜单（左侧）

2.对于页面内容的其余部分（右侧）

我希望我的侧面导航菜单能够覆盖整个屏幕高度。但不知何故，我没有做到这一点，我尝试了以下尝试。

第一次尝试（html代码）

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这段代码存在的问题是，如果.PageContent类中的内容小于屏幕高度（没有显示滚动条），但是当.PageContent类中的内容大于当前屏幕高度时（滚动条显示）然后我的左侧导航显示顶部导航和它之间的小差距因为（位置：固定）。

这是一个截图：

在我的第二次尝试中，我改变了我的立场：固定到位置：绝对然后出现一个新问题， 侧栏导航使用滚动条折叠当前屏幕高度的一半高度

html的css代码和正文

html , body{height:100%;}

我被困了，建议我做一些好的（正确的）方法。

Answer 1

我认为您可以删除侧边栏的绝对或固定定位。

只需将其设为float: left;，保持当前宽度（20％）。

然后，对于.mainPageContent，请将其设置为float: right;并填写＆＃39;％＆＃39;填充左侧和内容的宽度。

然后，对于高度，我使用min-height: 100vh;来保证填充屏幕的所有高度（vh =视图高度），并得到浏览器的良好支持。

所以你可以在侧边栏上设置min-height: 100vh;，我认为它会起作用。

希望这有帮助！

Answer 2

当您使用固定定位时，请使用height＆amp;而不是将100%设置为top。 bottom个属性，top的值等于标题的高度，bottom的值为0。