当我在查看我创建的页面时调整浏览器窗口的高度或宽度时，我遇到了一些奇怪的行为。我想要发生的是让页面中的元素根据可用空间大小调整自身大小——也就是说，根据视口(viewport)调整它们占用的空间量。我的示例使用 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，将可用空间从左到右分成两半(该图像只是我在网络上找到的图像，而不是我实际使用的图像)。
如果您查看该代码笔并调整其大小，底部呈现的内容会相应地调整大小。但是，如果您右键单击呈现的内容，选择“This Frame -> Open Frame in New Window(我使用的是 Firefox)，它现在不再调整大小。
我实际上使用的是 Rails，当我从 RubyMine 中启动服务器时，它并没有像我希望的那样调整大小。但是，如果我更改 body 标记的高度等属性，并将其设置为 100% 而不是 100vh，它将调整大小为我预计除非我在新选项卡中打开它，否则它将无法再次按预期调整大小。
最佳答案
对于后代来说，这似乎是我在 Firefox 中启用的 CodeClimate 插件的问题。禁用它会导致问题得到解决。
关于html - 调整页面大小仅在某些时候有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55788458/