神奇的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);
}

结语

难道浏览器的滚动条也得考虑到宽度的范围之内么？