为何Div百分比高度在不同屏幕显示不一致？如何实现全屏无滚动布局？

为什么百分比高度在不同屏幕显示不一致？ #

你的问题主要来自两个核心原因：

1. 百分比高度的依赖关系：CSS中百分比高度是基于父元素的高度计算的。如果你的html和body标签没有设置height: 100%，那么外层的.take-page-height设置的height:100%只会继承父元素（默认是body）的高度，而body默认高度是由内容撑开的，并非整个视口高度，这就导致在不同屏幕上显示高度不一致。
2. 盒模型的默认行为：默认情况下CSS采用content-box盒模型，元素的padding会额外加到你设置的width和height上。比如你给.take-page-height设了width:100%和padding:1.5%，实际元素总宽度会是100% + 3%（左右各1.5%），超出视口宽度，从而产生滚动条。

实现Div占满屏幕、保留内边距且无滚动的正确方案 #

下面是针对性的修改步骤，确保在所有屏幕上都能达到预期效果：

1. 重置基础样式，确保视口高度被正确继承

首先给html和body设置高度，并清除默认边距，避免出现不必要的白边：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 修改外层Div的样式

调整.take-page-height的样式，核心是启用border-box盒模型，并确保元素完全覆盖视口：

.take-page-height {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5%;
  box-sizing: border-box; /* 让padding包含在width/height内，不会超出视口 */
  overflow: hidden; /* 强制隐藏滚动条，确保无滚动效果 */
}

3. （可选）用视口单位替代百分比

如果你不想用fixed定位，也可以用vh（视口高度单位）来更直接地控制高度，这样无需依赖父元素的高度设置：

.take-page-height {
  min-height: 100vh;
  width: 100%;
  padding: 1.5%;
  box-sizing: border-box;
  overflow: hidden;
}

修改后的完整代码示例 #

HTML（保持不变）

<div class="take-page-height">
  <div class="welcome-div">
    <div class="col-md-12 center-text">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.take-page-height {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5%;
  box-sizing: border-box;
  overflow: hidden;
}

.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;
}

.center-text {
  text-align: center;
  width: 100%;
}

关键说明 #

• box-sizing: border-box是解决内边距导致元素超出视口的核心，它让元素的总宽高等于你设置的width/height值，padding和border都包含在这个范围内。
• position: fixed配合top:0;left:0可以让元素完全固定在视口内，不受页面滚动影响，同时确保高度和宽度完全覆盖视口。
• overflow: hidden可以防止内部内容意外超出时出现滚动条，严格保证无滚动效果。

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