强制元素包含到 100vh

Question

为什么视口不听“高度：100vh”并且仍然将内容推到它之外？

无需硬编码 calc(100vh - 21px) 之类的内容即可实现此目的的最佳做法是什么？

编辑：保证金似乎确实是这里的问题。我的工作示例很难找到边距，因为它使用离子阴影 dom 元素并且有大量隐藏 CSS。明天我将尝试对其进行反向工程并尝试找出问题所在。并在此处发布带有更好代码示例的答案。

body, html {height:100%; margin:0; padding: 0;}

menu {
  background-color: hsl(206, 68%, 96%);
  width: 50%;
  height: 100vh;
  
  display: flex;
  flex-direction: column;
}

header {
  background-color: hsl(206, 68%, 60%);
}

nav {
  overflow-y: auto;
  background-color: hsl(206, 68%, 40%)
}

footer {
  margin-top: auto;
  background-color: hsl(206, 68%, 60%);
}

<menu> 
  <header>
    Header
  </header>
  
  <nav>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </nav>
  
  <footer>
    Footer
  </footer>
  
</menu>

Answer 1

从父级 div 中删除边距，并使该容器位于您要提供边距的 div 之外，如下所示：

body {
 margin: 0px;
}

.sidebar {
 height: 100vh;
 width: 100px;
 position: fixed;
 background-color: red;
}

.container {
 width: 500px;
 margin-left: 150px;
 border: 1px solid black;
}

.item {
 height: 100px;
 width: 100px;
 background-color: blue;
 margin-bottom: 10px;
}

<div class="sidebar"></div>
<div class="container">
<div class="item"> im on the side </div>
<div class="item"> im on the side </div>
<div class="item"> im on the side </div>
</div>

Answer 2

将 margin: 0; 添加到 menu 以删除浏览器添加的任何默认页边距：

body, html {height:100%; margin:0; padding: 0;}

menu {
  background-color: hsl(206, 68%, 96%);
  width: 50%;
  height: 100vh;
  
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  background-color: hsl(206, 68%, 60%);;
}

footer {
  margin-top: auto;
  background-color: hsl(206, 68%, 60%);
}

<menu> 
  <header>
    Header
  </header>
  
  <nav>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </nav>
  
  <footer>
    Footer
  </footer>
  
</menu>

强制元素包含到 100vh

Forcing elements to contain to 100vh

css

flexbox