使用100vh时溢出

Question

我将网格视图高度设置为 100vh。我的网格视图由两个 div 组成，第一个 div 用于图像，第二个 div 用于表单。这是我的 CSS 代码的一部分：

* {
    box-sizing: border-box;
}

html {
    font-family: "Urbanist", sans-serif;
}

body {
    margin: 0;
    background-image: url(../img/bgImg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: rgba(255,255,255,1);
}

.grid-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px;
    height: 100vh;
}

img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

问题是当我缩小它时它会溢出，而当我放大内容时它会很好地适应整个页面。这是它的图片。

我的目的是将整个内容放入一页（没有垂直滚动），即使屏幕分辨率的大小不同。

我的意见是我确实检查了网站，我认为导致溢出的是图像，我尝试将高度更改为 min-height 100vh 但仍然不起作用。我不确定我的观点是对还是错。

谢谢你。

Answer 1

这是您应该在 CSS 中更改的内容

/* Add overflow:hidden to your html element to prevent scrolling */
html {
    font-family: "Urbanist", sans-serif;
    overflow: hidden;
}

/* Make the body element 100vh */
body {
    margin: 0;
    background-image: url(../img/bgImg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 1);
    height: 100vh;
}

/* make grid-view's height 100% */
.grid-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px;
    height: 100%;
}

/* 
 * Change the image to have max-height set.
 * You want it to be 100vh minus your padding on top and bottom.
 */

img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 100px);
}

您可能还想选择一种新的 vh 单位，例如移动设备的 svh、dvh 或 lvh。这些将解决移动浏览器或底部标签栏上消失的 URL 栏的问题。 svh 将为您提供这些附加元素内的高度，lvh 将为您提供没有它们的大小，dvh 会在它们出现或消失时动态变化。使用普通的 vh 单位作为后备，如下所示：

img {
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
}