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

Question

我想用一个 `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>

和以下 CSS

.take-page-height {
  height: 100%;
  width: 100%;
  padding: 1.5%;
  position: fixed;
}

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

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

以及如何解决我的问题，即 div 占据整个屏幕 + 我给它的填充而不滚动？

亲切的问候

Answer 1

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

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

为了解决这个问题，第一种方法应该是重置默认的正文边距： body { margin: 0; } body { margin: 0; } 。

但是填充和边框仍然会导致溢出。 不使用calc function的简单解决方案是更改默认框行为。 默认的盒子行为是： box-sizing: content-box; . 如果将其更改为box-sizing: border-box; 填充和边框将不再引起问题。

PS：我为parant div添加了红色背景色以进行演示。

编辑，我将尺寸移动到身体。 还将主体声明为网格。 它设置导航栏将采用导航栏所需的高度，文本区域将填满剩余空间。 这是通过为网格模板中导航栏的行高指定最小内容的高度来完成的。 所以它只会是导航栏需要的高度。 因此，是否使用相对或固定高度或仅使用内容高度声明它取决于您。

 body { margin: 0; box-sizing: border-box; height: 100vh; width: 100vw; display: grid; grid-template-rows: min-content auto; } nav { min-height: 80px; background-color: blue; }.take-page-height { padding: 1.5%; background-color: red; /* added for demonstration */ }.welcome-div { position: relative; display: flex; align-items: center; width: 100%; height: 100%; word-wrap: break-word; background-color: green; background-clip: border-box; }

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

Answer 2

一个不修改代码的简单修复方法是设置box-sizing: border-box; 在您的 css 文件中

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

在不修改任何其他行的情况下修复了该问题。 另外，正如用户tacoshy所说，没有必要使用position: 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;
}

Answer 3

百分比适用于我们使用的设备。 要获得绝对值，您可以使用另一个值，例如 px、vh 和 vw、em、rem。

Answer 4

如果您希望外部 div 为整个屏幕的大小，那么。

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

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

.take-page-height {
  height: calc(100vh - 1.5%);
  width: calc(100vw - 1.5%);
  padding: 1.5%;
  position: fixed;
}

但老实说，更好的方法是执行以下操作。

.take-page-height {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-div {
  width: 98.5%;
  height: 98.5%;
}