overflow-y 自动或滚动条不允许显示所有溢出内容答案

【问题标题】：overflow-y either auto or scroll bar does not allow showing all overflow contentoverflow-y 自动或滚动条不允许显示所有溢出内容
【发布时间】：2018-01-15 20:29:29
【问题描述】：

我有一个带有背景图像的虚拟屏幕。背景图像随着视口的大小正确扩展或收缩。我有虚拟的 flexbox 内容，我故意让页面底部溢出。滚动条正确显示，但滚动不够远，无法显示所有溢出的内容。 道歉：内容多种多样，所以我可以知道没有显示什么。虚拟标题菜单栏很好.. 它应该向上滚动 - 确实如此。

CSS：

    html  {
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  overflow-y: auto;
  min-height: 100vh;
  width: 100%;

  margin: 0; padding: 0; border: 0; cursor: default
}

ul {
  list-style: none;

  li {
    display: inline;
    margin-left: 50px;
    margin-top: 50px;
  }
}

.blockStyleEven {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-evenly;
}

.blockSpaceAround {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-around;
}

.blockSpaceBetween {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: space-between;
}

.blockStart {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: flex-start;
}

.blockEnd {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: flex-end;
}

.blockCenter {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
}

.maroon {
  width: 100px;
  height: 100px;
  background-color: maroon;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
}

.green {
  width: 100px;
  height: 100px;
  background-color: green;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.workspace {
  background: url("././Features.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  h1 {
    color: #E0B228;
  }

  h2 {
    color: #2856E0;
  }
}

HTML：

<div [ngStyle]="{'width': '100vw', 'height': '100vh'}">
  <div [ngStyle]="{'display': 'flex', 'flex-direction': 'column'}">
    <div [ngStyle]="{'background-color': 'beige'}">
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
    <div  class="workspace">
      <div class="blockStyleEven">
        <div class="maroon">space-evenly</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceAround">
        <div class="maroon">space-around</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceBetween">
        <div class="maroon">space-between</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStart">
        <div class="maroon">start</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockEnd">
        <div class="maroon">end</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockCenter">
        <div class="maroon">center</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStyleEven">
        <div class="maroon">space-evenly</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceAround">
        <div class="maroon">space-around</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockSpaceBetween">
        <div class="maroon">space-between</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockStart">
        <div class="maroon">start</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockEnd">
        <div class="maroon">end</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
      <div class="blockCenter">
        <div class="maroon">center</div>
        <div class="red">RED</div>
        <div class="green">GREEN</div>
        <div class="blue">BLUE</div>
      </div>
    </div>
  </div>
</div>

提前致谢。修行者

【问题讨论】：

你看过这个帖子吗？ stackoverflow.com/questions/33454533/…
你能为此做一个 plunkr 吗？
[ngStyle] 所以你手动编辑每一行样式？
不，我不会手动设置每一行的样式，但我可以毫不费力地快速复制和粘贴一个愚蠢的示例。
给我一个提示：我知道如何制作一个 plnkr 但我如何将它链接到这个问题......只需将它保存到某个链接并将链接放在 cmets 中？还是stackoverflow有办法？瑜伽士

标签： html css angular

【解决方案1】：

终于明白了。问题是滚动条“太短”而无法显示所有内容。这是因为我的工作区类位于虚拟菜单栏下方的 div 上。当我将工作区（包含边距：自动）放在外部移动 div 上时，它工作得很好。感谢你的帮助。为早先糟糕的格式道歉，现在已经清理了。修行者

【讨论】：

所以只需添加 margin:auto?