我有一个网页，主要内容中有一个导航栏、一个侧边栏和一个表格。我的简化代码如下：
<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%，并尝试使用弹性生长属性，但似乎没有任何效果。请告诉我是否仍然需要包含更具体的详细信息，但这就是实际使用维度属性的所有内容。
我会使容器列相对，然后您可以绝对定位您的主要内容以填充列并在内容上自动溢出：
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
/* FOR SIDEBAR */
.sidebar {
background-color: white;
border-right: 1px solid black;
padding: 0 1.5rem;
}
.relative {
position: relative;
}
.main-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}<!-- 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 s
</div>
<!-- Content -->
<div class="col-lg-9 col-md-8 relative">
<div class="main-content">
table with variable height <br>
s<br>s<br>s<br>s<br>s<br>s<br> s
<br>s<br>s<br>s<br>s<br>s<br> s
<br>s<br>s<br>s<br>s<br>s<br> s
<br>s<br>s<br>s<br>s<br>s<br>
</div>
</div>
</div>
</div>