神奇的CSS樣式

前言

這周主要對研究生試題錄入系統進行原型開發，在張喜碩組長弄完UI以後，我發如今我這出現了一個不知原因的樣式錯誤，在我更新分支後

發現右邊什麼也沒有了？？而在組長那顯示是正常的

爲何出現這種狀況？

當打開控制檯時，瀏覽器右側出現瀏覽器的滾動條，就把內容擠到下面了

HTML 設置content樣式

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 p-0">
      <app-header></app-header>
    </div>
  </div>
  <div class="row">
    <div class="menu border-right">
      <app-menu></app-menu>
    </div>
    <div class="content">
      <app-nav></app-nav>
      <div class="ml-4 mr-4 mt-4">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

css：

.content {
  height: calc(100vh - 72px);
  width: calc(100vw - 279px);
}

相對長度（vw）

相對長度單位指定了一個長度相對於另外一個長度的屬性。對於不一樣的設備相對長度更適用。

解決

將css樣式vw寬度改小點，把右側的滾動條位置給留出來

.content {
  height: calc(100vh - 72px);
  width: calc(99vw - 279px);
}

結語

難道瀏覽器的滾動條也得考慮到寬度的範圍以內麼？