在移动 chrome 上调整窗口大小时，flexbox 中的奇怪行为答案

【问题标题】：Strange behavior in a flexbox when resizing window on mobile chrome在移动 chrome 上调整窗口大小时，flexbox 中的奇怪行为
【发布时间】：2017-11-05 02:47:15
【问题描述】：

在移动浏览器上发生了一个非常奇怪的 flexbox 行为。

Please see this gif for a visual of what's happening

这只发生在移动浏览器上，我目前在 Google Pixel 手机上使用 Chrome 移动版。我有一个正在运行的调整大小脚本，它调整页面上多个元素的大小，作为无法像这样正确利用 100vh 的解决方法：

window.onresize = function() {
        document.getElementById("backgroundImage").style.height = window.innerHeight;
        document.getElementById("mainScreen").style.height = window.innerHeight;
        if (window.innerWidth > 750) {
          document.getElementById("scrollContent").style.height = window.innerHeight - "96";
        } else {
          document.getElementById("scrollContent").style.height = window.innerHeight - "72";
        }
    };

在 gif 中看到的正在影响的项目是弹性容器中的项目。当我向上滚动以隐藏导航栏，然后单击其中一个弹性链接时，就会发生这种行为。

我正在使用 Vuejs，下面的内容是通过检查道具更改来填充的。 flex 链接将一个字符串传递给一个函数，该函数将项目视图更改为所选项目。

我还有一个脚本可以添加一个更改所选链接背景颜色的类，并删除所有其他链接上的该类，这就是我更改活动链接背景的方式。

var webComp = Vue.component('design-comp', {
  template: "#webComp",
  props:['trans-state'],
  components: {
      'project-comp': projectComp,
  },
  data: function() {
    return {
      activeProj: 'default',
    }
  },
  methods: {
    changeProj: function(proj) {
      this.activeProj = proj;
      var a = document.getElementsByClassName('projClick');
      for (i=0; i<a.length; i++) {
        a[i].classList.remove('projActive');
      }
      event.currentTarget.classList.add('projActive');
      document.getElementById('webContainer').scrollTop = 0;
    }
  },
  created: function() {
    this.activeProj = "default";
  }
});

这是我的 SASS 文件的相关部分：

#webContainer {
  margin-top: 50px;
  height: calc(100% - 50px);
  .projHeader {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: $headerColor;
    box-sizing: border-box;

    .projClick {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      height: 50px;
      box-sizing: border-box;
      background-color: $contentColor;
      border-right: 2px solid $headerColor;
      border-left: 2px solid $headerColor;
      border-bottom: 4px solid $headerColor;
      border-top: 4px solid $headerColor;
      flex-basis: 50px;
      transition: background-color 0.3s;

      &.projActive {
        background-color: $linkActiveColor;
      }

      p {
        color: $fontColor;
        font-family: $titleFont;
        font-size: 2em;
      }
    }
  }
}

这是相关的 HTML：

<div class="viewContainer" id="webContainer">
        <div class="transitionBox"></div>
        <div class="stickyImageBottomLeft"><img src="./img/AfricaMountainPixelR.gif" /></div>
        <div class="stickyImageBottomRight"><img src="./img/AfricaMountainPixel.gif" /></div>
        <div class="projHeader">
            <div class="projClick projActive" v-on:click="changeProj('default')">
                <p>0</p>
            </div>
            <div class="projClick" v-on:click="changeProj('kyount')">
                <p>1</p>
            </div>
            <div class="projClick" v-on:click="changeProj('prodigal')">
                <p>2</p>
            </div>
            <div class="projClick" v-on:click="changeProj('joy')">
                <p>3</p>
            </div>
            <div class="projClick" v-on:click="changeProj('cgl')">
                <p>4</p>
            </div>
            <div class="projClick" v-on:click="changeProj('mikeg')">
                <p>5</p>
            </div>
            <div class="projClick" v-on:click="changeProj('reddit')">
                <p>6</p>
            </div>
            <div class="projClick" v-on:click="changeProj('westbeach')">
                <p>7</p>
            </div>
        </div>
        <div class="contentContainer">
        Project Page is loaded here
        </div>
</div>

我希望有人可能知道发生了什么，因为我真的看不出发生这种情况的原因。

【问题讨论】：

看来你不明白.style.height = var 的工作原理。 var 应该是有效的 css 值字符串，否则不会生效。高度的有效css字符串是number + units（例如10px或1%或99em等）window.innerHeight返回不带单位的数值。所以你的 onresize 函数什么都不做。正确的方法是e。 G。 document.getElementById("scrollContent").style.height = window.innerHeight - 96 + 'px';
@KoshVery 尽管出现了错误，这部分 javascript 仍按预期工作，但我还是更改了它。然而，改变它并没有解决主要问题。
这不是解决办法。那是 J 的评论。
能否将您的 HTML 添加到问题中？
@KoshVery 好的，我添加了 HTML 的相关部分。

标签： javascript css mobile flexbox vue.js

【解决方案1】：

试试这个：

#webContainer {
  margin: 0;
  padding-top: 50px;
  height: 100%;
  box-sizing: border-box; /* if you didn't apply it before */
...

【讨论】：

谢谢，这在技术上解决了我的问题。但是，我现在记得为什么我最初使用 margin-top 而不是 padding-top：在 projHeader 下面加载的内容浮动在它上面。更改 z-index 工作正常，但随后滚动条被切断。我会寻找解决方案，但再次感谢您帮助查明问题。
乐于助人！看起来您的代码过于复杂，但我相信您很快就会解决它。祝你好运！

【解决方案2】：

在 Kosh Very 的帮助下，我能够找到一个完美运行的解决方案，同时仍保持元素的预期样式。

#webContainer {
  margin-top: 50px;
  box-sizing: border-box;
  position: relative;
  height: 100%;

    .projHeader {
        ...
        position: fixed;
        ...
    }
}

我仍然觉得最初的问题是某种错误，但这至少是一种解决方法。

【讨论】：