我有一个网页，其中包含导航栏，侧边栏和主要内容内的表格。我的简化代码如下：
<body>
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark py-2 sticky-top">
<!-- navbar content -->
</nav>
<!-- Actual Content -->
<div class="container-fluid flex-grow-1">
<div class="row h-100">
<!-- Sidebar -->
<div class="col-lg-3 col-md-4 d-none d-md-flex h-100 flex-column sidebar">
<!-- sidebar content -->
</div>
<!-- Content -->
<div class="col-lg-9 col-md-8 flex-sm-column">
<div class="main-content w-100 d-flex flex-grow-1">
<!-- table with variable height -->
</div>
</div>
</div>
</div>
<body>
html,
body {
height: 100vh !important;
display: flex;
flex-direction: column;
}
/* FOR SIDEBAR */
.sidebar {
background-color: white;
border-right: 1px solid var(--light-grey);
padding: 0 1.5rem;
}
/* TABLE */
.main-content {
max-height: 100%;
overflow: auto;
}
.table {
margin: 0;
}
我打算发生的事情是使身体始终具有屏幕的高度。当桌子很小时，这是可以实现的，但是当桌子溢出时，身体的高度会增加。如何使content仅占据屏幕的剩余高度，并从main-content而不是主体上吸收任何溢出（来自表格）？
我尝试将所有物体的高度设置为100％，并使用flex-grow属性，但似乎没有任何效果。请告诉我是否仍然需要包含更多特定的细节，但这实际上就是利用尺寸属性的所有内容。
我将容器列设为相对列，然后您可以将主要内容绝对定位为填充该列并在内容上自动溢出：