Я получаю странное поведение при настройке высоты или ширины окна моего браузера при просмотре созданной мной страницы.Я хочу, чтобы произошло, чтобы элементы на моей странице изменили свой размер в зависимости от того, сколько места доступно, то есть изменили количество занимаемого ими пространства на основе области просмотра.В моем примере используется 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, который делит доступное пространство пополам слева направо (изображение - это то, что я нашел в Интернете, это не изображение, которое яна самом деле использую).
Если вы посмотрите на этот кодовый блок и измените его размер, то отображаемое содержимое внизу изменится соответственно.Однако, если вы щелкнете правой кнопкой мыши в отображаемом контенте, выберите «Этот фрейм -> Открыть фрейм в новом окне (я использую Firefox)», теперь он больше не изменяет размеры.
На самом деле я использую Rails, икогда я запускаю сервер из RubyMine, он не изменяется в соответствии с желаемым размером. Однако, если я изменяю свойство, такое как высота тега body, и устанавливаю его, скажем, 100% вместо 100vh,он изменит свой размер, как я ожидаю, если я не открою его на новой вкладке, и в этот момент он не сможет изменить размер, как ожидалось.