我正在尝试设置一个网格系统,一面是表格,另一面是图像。现在的问题是我希望所有内容都转到视口的底部,但由于某种原因,图像不会到达屏幕的底部。
我已经尝试在height: 100vh
上放置一个body, *
和图像本身,但它没有改变。
.login-section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-areas: "form form form form form form form form map map map map";
align-items: center;
justify-items: center;
}
.login-section .login-form {
grid-area: form;
}
.login-section .login-map {
grid-area: map;
width: 100%;
overflow-x: hidden;
}
<div class="login-section">
<div class="login-map">
<img src="../img/map.png" alt="photo map">
</div>
<div class="login-form">
<div class="login-form-back">
Bla bla login
</div>
</div>
</div>
为height: 100vh
提供login-section
并使用align-items: flex-end
- 请参阅下面的演示:
body {
margin: 0; /* Reset body-margin */
}
img {
display: block; /* Remove whitespace below image*/
height: 100%; /* Image extending the full height of the grid item */
}
.login-section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-areas: "form form form form form form form form map map map map";
/*align-items: center;*/
align-items: flex-end; /* ADDED */
height: 100vh; /* ADDED */
justify-items: center;
}
.login-section .login-form {
grid-area: form;
}
.login-section .login-map {
grid-area: map;
width: 100%;
overflow-x: hidden;
height: 100vh; /* image over full viewport*/
}
<div class="login-section">
<div class="login-map">
<img src="https://via.placeholder.com/100" alt="photo map">
</div>
<div class="login-form">
<div class="login-form-back">
Bla bla login
</div>
</div>
</div>