调整页面大小仅在某些时候有效

Question

当我在查看我创建的页面时调整浏览器的高度或宽度 window 时，我遇到了一些奇怪的行为。我想要发生的是让我页面中的元素根据可用的 space 大小调整自己的大小——也就是说，调整它们 space 的数量基于视口消费。我的示例使用 flexbox.

我在这里创建了一些 HTML：

<!doctype html>
<html lang="en-US">
<head>
  <title>SOMEPLACE</title>
</head>
<body>

<div class="half-half-outer-container">
  <div class="half-half-container">
    <div class="left-side image-bg"></div>
<div class="right-side">
<div class="login-form">
  <form>
    <header class="no-border">
      <h2>Welcome to Someplace</h2>
    </header>
    <div class="form-fields">
<div class="form-group theme-grain">
  <label for="username-field">Email or Username</label>
    <input type="text" id="username-field" value="" placeholder="" class=" " />

</div>
<div class="form-group">
  <label for="password-field">Password</label>
  <div class="field-icon-container">
    <input type="password" id="password-field" value="" placeholder="" class=" " />
    <i class="fa fa-fw fa-eye field-icon foamfactory-show_password" aria-label="password-visibility-control" aria-hidden="true" aria-controls="password-field"></i>
  </div>

</div>
      <a href="javascript:void(0);">Forgot your username/password?</a>
    </div>
    <footer>
      <button>Sign In</button>
    </footer>
  </form>
</div>
</div>
  </div>
</div>
</body>
</html>

连同 CSS:

body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Work Sans', sans-serif;
  height: 100%;
  width: 100%;
}

// Flexbox "Half and Half Container" - a container that is divided into two
// columns, each of which consuming 1/2 of the available space.
.half-half-outer-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .half-half-container {
    align-items: center;
    display: flex;
    height: 100vh;
    width: 100%;

    .left-side {
      flex: 1 1 50%;
    }

    .right-side {
      flex: 1 1 50%;
    }
  }
}

.image-bg {
  background-image: url('https://tashasoyster.com/wp-content/uploads/2018/06/P1030493-1440x1828.jpg');
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

您也可以在这里访问：

https://codepen.io/jwir3/pen/mgKNNo

基本上，它是一个 flexbox，将可用的 space 从左到右分成两半（该图像只是我在网上找到的图像，而不是我实际使用的图像）。

如果您查看该代码笔并调整其大小，底部呈现的内容会相应地调整大小。但是，如果您右键单击呈现的内容，select“此框架 -> 在新框架中打开框架 Window（我使用的是 Firefox），它现在不再调整大小。

我实际上正在使用 Rails，当我从 RubyMine 中启动服务器时，它没有按照我想要的那样调整大小。但是，如果我像 body 标签的高度那样更改属性，并将其设置为 100% 而不是 100vh，除非我打开它，否则它将按我的预期调整大小在新标签页中，此时将无法再次按预期调整大小。

Answer 1

对于后代来说，这似乎是我在 Firefox 中启用的 CodeClimate 插件的问题。禁用它会导致问题得到解决。

调整页面大小仅在某些时候有效

Resizing page only works some of the time

html

css

viewport

flexbox