一个无需修改代码的简单修复方法是在css文件中设置

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

在不修改任何其他行的情况下修复此问题。另外，正如用户所说的，不需要使用。使用以下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;
}

若要使用完整的屏幕高度，请使用。若要使用全屏宽度，请使用:。

主要的问题将是，它是一个明确的高度的内容区域。意味着衬垫，边距和边框会溢出它，默认情况下你会得到滚动条。

要解决这个问题，第一种方法应该是用重置默认正文边距。

但是，填充和边框仍然会导致溢出。不使用的简单解决方案是更改默认框行为。默认的框行为是:。如果将其更改为，则衬垫和边框将不再引起问题。

null

body {
  margin: 0;
}

.take-page-height {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
  background-color: red;
}

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

<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的大小，整个屏幕那么。

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