Question

我有一个带背景图像的虚拟屏幕。背景图像正确扩展或缩小视口的大小。我有虚拟的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>

提前致谢。瑜珈

Answer 1

终于明白了。问题是滚动条“太短”无法显示所有内容。这是因为我的工作区类位于虚拟菜单栏下方的div上。当我将工作空间（包含Margin：auto）放在外部移动div上时，它工作得很好。感谢你的帮助。为较早的不良格式道歉，现在已经清理干净了。瑜珈

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

1 个答案: