为什么div没有达到全高？

Question

我正在尝试创建一个侧边栏，它是整个页面的高度，它嵌套在一个名为main的div中。

代码是：

.main {
   display: flex;
   overflow-y: hidden;
  }
 
.sidebar {
    height: 100%;
    background: #212121;
    }

.navbar {
     margin: 0;
     padding: 0;
    }

<div class="main">
  <div class="sidebar">
    <ul class="navbar">
      ...
    </ul>
  </div>
</div>

div默认为无序列表的大小，即200px;虽然我可以将其更改为其他尺寸，例如"height: 500px"，但由于屏幕尺寸不同，我不想这样做。

有没有办法在不使用视点大小的情况下执行此操作，例如height: 100%，但实际上有效吗？

Answer 1

如果您始终希望.main成为窗口的整个高度（和宽度），则可以绝对定位并拉伸它。

 .main {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    overflow-y: hidden;
}

取决于你所寻找的.main div。