Div设置height:100%不生效，求替代100vh的全屏高度方案

核心思路 #

不用100vh（会被移动端浏览器UI栏遮挡），改用**动态视口单位dvh**搭配Flex布局，同时确保父元素高度链完整，既实现占满可视区域，又支持内部图片自适应高度。

具体代码修改 #

1. 根元素（html/body）样式

html, body {
  margin: 0;
  padding: 0;
  /* 优先用dvh适配移动端，旧浏览器回退到vh */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

2. #home_Page样式

#home_Page {
  /* 占满父容器剩余高度，自动适配视口 */
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 可选：避免内部元素溢出时出现滚动条 */
  min-height: 0;
}

3. 内部元素样式调整

#homeSection {
  background-image: url(Assets/images/GraffitoViaDellaPace.svg);
  background-position: bottom right;
  background-repeat: no-repeat;
  padding-left: 20px;
  margin-top: calc(45px + 1vw);
  /* 仅占自身内容高度，不挤压图片区域 */
  flex: 0 0 auto;
}

#fotoRicordi {
  /* 占剩余空间，让图片自适应填充 */
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#fotoRicordi img {
  width: 100%;
  height: auto;
  /* 可选：如果需要图片填充容器且保持比例 */
  object-fit: cover;
}

方案说明 #

• dvh是现代浏览器支持的动态视口单位，会自动排除移动端浏览器的顶部/底部UI栏高度，完美替代vh解决遮挡问题；
• Flex布局让#home_Page自动继承根元素的视口高度，同时内部元素可按需求分配空间，图片容器能自适应剩余高度；
• 保留了图片的自适应特性，确保#home_Page高度会随图片尺寸变化而调整，同时保证至少占满可视区域。

内容的提问来源于stack exchange，提问作者Devma