Question

我想在视口之后创建一个div。我无法使用固定定位。出于某种原因div没有正确地跟随视口，它总是“落后”。后面，特别是在改变滚动方向时。你可以在plunker here上看到我的意思。

这是问题的第一部分。第二个是我需要div在它出现时立即进入视口。（单击plunker输出面板中的任意位置将切换div以显示）。出现的* ngIf部分非常重要，因为在我的实际应用程序中，我使用的是带有输入动画而不是div的组件，因此我不会感到[hidden]。

那为什么我不能使用fixed定位？
基本上，当视口包含滚动条时，固定定位会导致元素以不同于其兄弟元素的方式计算宽度。我也无法在元素上使用overflow: scroll技巧，因为它具有被视口剪切的阴影。有两个滚动条看起来也很难看。

Answer 1

这是使用flex的包装器中的固定居中div。 Demo Here

   #wrapper{
        position:absolute;
        width:100%;
        height:100%;
        position:fixed;
        display: flex;
  justify-content: center;
      }
      #my-app{
        position:relative;
        width:50%;
       height:50%;
        background-color:green;
      }



  <div id="wrapper">
        <div id="my-app">
      </div>
      </div>

如何使响应中心div跟随视口？

1 个答案: