为何不同屏幕Div百分比高度有差异？如何实现全屏带内边距无滚动布局？

问题原因分析 #

你遇到的高度不一致问题主要来自两个核心点：

1. 百分比高度的依赖逻辑：CSS里的百分比高度是基于父元素高度计算的。如果你的html和body标签没明确设置height: 100%，外层.take-page-height的height:100%其实是参照body的默认高度（也就是内容高度，而非整个视口高度），这就导致不同屏幕下的计算结果出现偏差。
2. 默认盒模型的影响：默认的box-sizing: content-box会把padding额外加到元素的宽高之外。比如你给.take-page-height设了height:100%和padding:1.5%，元素实际高度会变成100% + 3%（上下内边距总和），直接超出视口触发滚动条。

解决方案 #

要实现稳定的全屏效果，我们可以从修正父元素高度、调整盒模型入手，再搭配更可靠的定位方式：

方法一：绝对定位+盒模型修正（兼容性最优）

这种方式适配所有现代浏览器，逻辑更稳妥：

/* 先重置html和body的默认样式，确保高度能正确传递 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.take-page-height {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 用top/bottom/left/right替代width/height:100%，确保完全覆盖视口 */
  padding: 1.5%;
  box-sizing: border-box; /* 让padding包含在元素宽高内，避免溢出 */
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
}

方法二：视口单位vh/vw（用法更直观）

视口单位vh直接对应视口高度的1%，100vh就是全屏高度，代码更简洁：

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
  box-sizing: border-box;
  position: fixed;
  margin: 0;
}

.welcome-div {
  /* 保留你原有的样式即可 */
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
}

效果说明 #

两种方法都能达成目标：

• 元素稳定占据整个视口高度，不同屏幕下无差异
• 内边距padding:1.5%被包含在元素内部，不会导致溢出滚动
• position: fixed确保元素始终固定在视口内，不会随页面其他内容滚动

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