移动端/平板端网站布局求助：loginD div随浏览器宽度扩大下移

嘿，我帮你排查下这个布局偏移的问题哈，根源和解决办法都给你理清楚了：

问题核心原因 #

你的#loginD用了padding-top:75%，这个百分比是基于父元素的宽度计算的（CSS里的百分比内边距/外边距，垂直方向也是参考宽度的，这点很容易踩坑）。所以当浏览器宽度切换到平板尺寸（比手机宽）时，75%对应的实际像素高度会大幅增加，直接导致loginD被推得向下偏移。

另外，#headD里的h1用了position:absolute，虽然你设置了padding-top:5%，但绝对定位元素脱离了文档流，这种定位方式也会让头部区域的布局稳定性变差。

修复方案（两种可选，按需选择） #

方案1：改用视口单位快速修复（最简单）

把#loginD的padding-top:75%换成基于视口高度的vh单位，这样顶部间距会基于屏幕高度计算，和宽度无关，彻底解决偏移问题：

#loginD {
  padding-top: 20vh; /* 替换原来的75%，可以根据视觉需求调整数值 */
  margin-left: 5%;
  margin-right: 5%;
  position: relative;
}

方案2：用Flex布局实现更稳定的整体布局（推荐）

如果希望头部和登录区域的垂直比例更可控，建议给父容器#bodyD设置Flex布局，这样能让整个页面的垂直布局更健壮：

1. 先修改#bodyD的样式，开启垂直方向的Flex布局：

#bodyD {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

2. 调整#headD的样式，用Flex实现h1的垂直居中，同时去掉绝对定位：

#headD {
  background-color: #414344;
  height: 15%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  align-items: center; /* 垂直居中内部的h1 */
  padding: 0 5%; /* 替换原来h1的左右margin */
}

#headD h1 {
  color: #dedfe0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 35px;
  /* 移除position:absolute、margin-left/right、padding-top */
}

3. 最后调整#loginD的样式，让它占据页面剩余高度，同时控制顶部间距：

#loginD {
  flex: 1; /* 自动占据#bodyD的剩余高度 */
  margin-left: 5%;
  margin-right: 5%;
  padding-top: 5vh; /* 根据需求调整顶部间距 */
  position: relative;
}

这样调整后，不管是手机还是平板尺寸，loginD的位置都会保持稳定，元素高度也能维持你想要的效果，宽度依然正常自适应。

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