Question

在查看创建的页面时调整浏览器窗口的高度或宽度时，我得到一些奇怪的行为。我想要要发生的事情是，使页面中的元素根据可用空间的大小来调整自身大小，也就是说，根据视口调整它们消耗的空间量。我的示例使用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，它从左到右将可用空间一分为二（该图像只是我在网络上找到的一个，不是我实际使用的图像）。

如果您查看该Codepen并调整其大小，则底部的渲染内容将相应调整大小。但是，如果右键单击渲染的内容，请选择“此框架->在新窗口中打开框架（我使用的是Firefox），现在不再调整大小。

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

Answer 1

为了后代，这似乎是我在Firefox中启用的CodeClimate插件的问题。禁用它可以解决问题。

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

1 个答案: