在顯示網(wǎng)站頁(yè)面的同一個(gè)窗口中的相同元素(設(shè)置為高度:100vh ),在刪除導(dǎo)入行之前和之后報(bào)告不同的客戶端高度:有導(dǎo)入時(shí)為881，沒(méi)有導(dǎo)入時(shí)為914

我在很久以前將bootstrap添加到項(xiàng)目中，并且從未使用過(guò)所提供的任何實(shí)際元素，所以我刪除了npm文件和導(dǎo)入' bootstrap/dist/CSS/bootstrap . min . CSS '；

不知何故，這改變了vh和vmin值，以至于應(yīng)用程序主體被拉伸，頁(yè)面開(kāi)始顯示滾動(dòng)條，字體大小功能(它與我的vmin相關(guān)的字體大小一起工作)開(kāi)始變得混亂

在刪除之前

import 'bootstrap/dist/css/bootstrap.min.css';

該應(yīng)用程序由一個(gè)頁(yè)面組成，該頁(yè)面應(yīng)該完全適合窗口，還有一個(gè)小部件和圖像的網(wǎng)格，所有東西都可以通過(guò)vmin或vh或vw縮小窗口大小。

更改這一行，這是我的項(xiàng)目中唯一的引導(dǎo)跟蹤，真的顛覆了內(nèi)部工作。我想知道發(fā)生了什么，bootstrap.min.css添加到項(xiàng)目中的是什么，我可以手動(dòng)將其放回項(xiàng)目中而不用隨身攜帶整個(gè)庫(kù)嗎

最小代碼示例:

App.js

import './App.css';

/* import 'bootstrap/dist/css/bootstrap.min.css';  */ 

function App() {
  return (
    <>
    <div className="App">
        <div className="App-body" id='body'>
          Hi
         </div>
    </div>
  </>
  );
}

export default App;

App.css

.App {
  text-align: center;
  margin: 0%;
}


.App-body {
  background-color: #3c4558;
  display: grid;
  grid: 5.9% 12.6% 3.7% 9.8% 11.7% 17.5% 7.3% 22.4% / 15% 10% 22% 22% 23.5%;
  padding: 1.3%;
  gap: 1.3%;
  margin: 0%;
  height: 100vh;/*this is REALLY weird*/
  font-size: calc(10px + 2vmin);
  color: white;
}

這聽(tīng)起來(lái)像是盒子大小的問(wèn)題，它定義了填充是否包含在高度和寬度值中。

嘗試添加* { box-sizing:border-box；}其中包括所有元素在這些值中的填充。