使一个 div 元素的高度达到 100%

Question

我正在为我的网站设计管理面板，首先在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:fixed改为position:absolute，然后出现了一个新问题，侧边栏导航会折叠到当前屏幕高度的一半，并带有滚动条。 HTML和BODY的CSS代码：

html , body{height:100%;}

我卡住了，请给我一些好的（适当的）方法来解决它。

- Hassan Raza

Answer 1

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

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

然后，对于你的.mainPageContent，将其设置为float: right;，并使用padding-left和内容宽度填充'%'的宽度。

至于高度，我使用min-height: 100vh;，这可以确保填充屏幕的所有高度（vh =视口高度），并且被浏览器很好地支持。

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

希望这有所帮助！

- Lucas Delobelle

Answer 2

因为您正在使用固定定位，所以不要将高度设置为100％，而是使用top和bottom属性，给top设置一个值，该值等于您标题的高度，并将bottom的值设置为0。

- Shaggy