Html 为什么90%的div高度在两个不同的屏幕上是不同的？

我想用一个Div来表示整个屏幕的高度，周围有一个漂亮的框架，没有滚动

因此，我有以下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>

当我降低外部Div的高度时，不同屏幕的高度不同。即使我使用百分比。为什么会这样

我如何解决div占用整个屏幕+我给它的填充并且没有滚动的问题

---

如果您希望外部div的大小与整个屏幕的大小相同，请向

致意

。选择页面高度{
高度：100vh；
宽度：100vw；
填充：1.5%；
位置：固定；
}

如果要离开该边界，可以尝试以下操作：

。选择页面高度{
身高：calc（100vh-1.5%）；
宽度：钙（100vw-1.5%）；
填充：1.5%；
位置：固定；
}

但老实说，更好的方法是做以下几点

。选择页面高度{
高度：100vh；
宽度：100vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.欢迎收看{
宽度：98.5%；
身高：98.5%；
}

要使用全屏高度，请使用

高度：100vh。要使用全屏宽度，请使用：
width:100vw

主要问题是，它是内容区域的一个确定高度。意味着填充、边距和边框将溢出，默认情况下您将获得滚动条

要解决此问题，第一种方法应该是使用：
body{margin:0；}
重置默认的正文边距

但是，填充和边框仍将导致溢出。不使用
calc函数的简单解决方案是更改默认框行为。默认框行为是：
框大小：内容框。如果将其更改为
框大小：边框框填充和边框将不再引起问题

PS：为了演示，我在Parnat分区添加了一个红色背景色

编辑时，我将尺寸移动到了主体。还将主体声明为网格。其设置为导航栏将采用导航栏所需的高度，文本区域将填充剩余空间。这是通过为栅格模板中导航栏的行高指定最小内容高度来实现的。因此，它的高度将取决于导航栏的要求。因此，如果您使用相对高度或固定高度或仅使用内容高度来声明，则由您决定


正文{
保证金：0；
框大小：边框框；
高度：100vh；
宽度：100vw；
显示：网格；
网格模板行：最小内容自动；
}
导航{
最小高度：80px；
背景颜色：蓝色；
}
.获取页面高度{
填充：1.5%；
背景色：红色；/*添加用于演示*/
}
.欢迎收看{
位置：相对位置；
显示器：flex；
对齐项目：居中；
宽度：100%；
身高：100%；
单词包装：打断单词；
背景颜色：绿色；
背景剪辑：边框框；
}
导航栏在这里
你好
一个不修改代码的简单修复方法是设置
框大小：边框框

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

在不修改任何其他行的情况下修复该问题。另外，正如用户
tacoshi
所说，不需要使用
位置：fixed。使用此css代码获得您的结果：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
}

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

百分比适用于我们使用的设备。
要获得绝对值，可以使用另一个值，例如px、vh和vw、em、rem。
百分比与屏幕大小有关。如果你想要一个确定的尺寸，就用像素。他想要整个屏幕的高度。因此，他需要使用相对测量。使用像素这样的确定单位，他会让整个屏幕在不同的屏幕上出现无响应的混乱你还错过了没有滚动条的最重要部分。如果你想使用一个可运行的代码段，你会看到你有一个滚动条，因为你没有重置正文边距。是的，我只是在修改原始工作。没有想到要添加我自己的推荐。非常感谢。编辑文章。使用代码片段，自己运行代码，你仍然没有修复任何东西。同样的问题仍然存在。您不能对抗任何边距、填充和边框。最后但并非最不重要的一点是，欢迎div的宽度和高度为97%，因为填充应用了两次（左+右和上+下）。但是，一旦他开始使用边界值，就会产生新问题。这就是为什么使用
框大小：边框框您好，工作完美。现在，如果在take page height div上方有一个导航栏，会发生什么？然后它就不工作了。我编辑了代码片段。它包括导航栏空间。可以根据需要定义高度。文本区域将填满剩余的空间。我希望这是你想要的，否则你需要具体说明。它是完全响应的。因此，如果没有等于0高度的导航栏，那么etxt区域将填满100%的空间。感谢sry没有澄清。但是我不可能将导航包含到Gridsystem中。您也可以使用任何其他元素。这只是一个你想包含什么以及如何包含的问题。因此，您应该指定。是的，正确。我不知道我应该写一篇新文章。基本上，它与答案中的HTML类似，但导航栏位于单独的组件中，不可包含在网格中。对许多组件都是如此。所以基本上有两个独立的组成部分（导航和静止），其余部分应该像我的问题中解释的那样。只有像素才是真正的“绝对”。EM和REM是半绝对的，因为它们取决于声明的字体大小或浏览器的默认字体大小。虽然REM是相同的EM，但始终使用根EM（正文字体大小）。vh和vw是依赖于浏览器窗口尺寸的相对测量值。
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
}

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