我有以下CSS配置

body,
html {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  border: 5px solid black;
}

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  box-sixing: border-box;
  background-color: blue;
}

<div class='a'></div>

要點是，簡單地說，你給& lthtml & gt高度為100vh，然后添加邊框。現(xiàn)在& ltbody & gt從5px高開始。現(xiàn)在您設置& ltbody & gt到100vh，但是因為& ltbody & gt從頂部開始5px，延伸到瀏覽器視窗下方5px。

您不需要對& lthtml & gt標記，您可以只給& ltbody & gt100vh和10px(或者你需要多少)的邊框。

如果拼寫正確，框大小將應用于指定的元素。然而，讓您的示例溢出的是5px邊框增加了兩個(！)次，一次到正文，一次到html標簽。

下面是一個沒有溢出的工作示例:

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

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 5px solid black;
  box-sizing: border-box;
  background-color: blue;
}

<div class='a'></div>

你拼錯了方塊sizining

div.a
{
  height: 100%;
  margin: 0px;
  padding: 0px;
  box-sixing: border-box; <-- supposed to be sizing
  background-color: blue;
}

溢出的原因是因為你的身體標簽有邊框

可以用calc() css函數(shù)去掉邊框造成的多余高度:like so-& gt；

body, html
{
   margin: 0px;
   padding: 0px;
   height: calc(100vh - 5px) <- remove the thicknes of the border from the height ;
   border: 5px solid black;
   box-sizing: border-box;
 }

calc()函數(shù)可以用來計算css單位，確保在數(shù)學運算符前后有一個空格

如果你需要我澄清或者我誤解了你的問題，請在評論中告訴我

有些事情需要弄明白。以下是更新后的代碼:-

body{
  margin: 0px;
  height: 100vh;
  box-sizing: border-box;
  border: 5px solid black;
}

div.a {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: blue;
}

<div class='a'></div>