• 纵向导航栏使用navbar-nav-scroll溢出截断问题

    项目场景：

    项目首页组件：Bootstrap-4.6.2、JQuery 3.7.1
    测试浏览器：Firefox126.0.1、Microsoft Edge125.0.2535.67
    IDE：eclipes2024-03.R

    在编写CRM的工作台主页面时，由于该页面使用的是较旧的技术，所以打算使用Bootstrap重写响应式页面，主要使用了Bootstrap的格栅布局系统。在编写左侧纵向导航栏时，发现添加滚动条后，导航栏下面缩短了一部分流出大部分空白，使得页面不美观。

    溢出截断
    问题代码如下：

    DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/crm-core/css/bootstrap_css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js">script>

<script type="text/javascript" src="/crm-core/js/bootstrap_js/bootstrap.bundle.js">script>
<script type="text/javascript">
   ...
script>
head>
<body>
	...
		
		<div id="center" style="position: absolute; top: 50px; bottom: 30px; left: 0px; right: 0px;">
		
		<div class="col-2 border-right navbar-nav-scroll" style="height: 100%;">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button"
                        role="tab" aria-controls="v-pills-home" aria-selected="true">工作台button>
                div>
            div>
			
			<div class="col-10 iframe-container">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item border border-white" name="workareaFrame">iframe>
				div>
			div>
		div>
	div>
body>
html>

    问题描述

    经过测试后，发现是在添加了navbar-nav-scroll后出现截断问题，但是该类如果删除会导致在滚动页面时右侧的