设置最大高度以填充所有可用空间 [英] Set max-height to fill all the available space
问题描述
我的Web应用程序在页面中放置了一些区域.基本上:
My web application has some areas placed in the page. Basically:
<body>
<nav> <-- top nav bar
<ol> <-- breadcrumb
<div> <-- row with buttons
<div class="overflow-auto">
<table> <-- run-time growing table
</div>
<footer> <-- sticky footer
</body>
在运行时，我的脚本向表中添加行.
为了使overflow-auto类正常工作，我必须设置一个max-height值.
如果我将其设置为100％，它会像没有溢出一样增长.如果我仅设置px值，它将起作用.
At run-time my scripts add rows to the table.
To get the overflow-auto class working I have to set a max-height value.
If I set it to 100% it just grows like without overflow. It works if I set a px value only.
相反，我的目标是填充上一个div(带按钮的行)和粘性页脚之间的所有可用空间(因此，取决于浏览器，宽度等).
My goal, instead, is to fill all the available space (so it depends on the browser, width, etc...) between the previous div (row with buttons) and the sticky footer.
换句话说，我希望用户始终看到页脚，以便当表格到达时，溢出功能应该开始起作用.
In other words, I want the user always sees the footer so when the table reach it, the overflow feature should begin to work.
我不知道这是否可以通过某些特定的类轻松解决，或者我必须手动计算可用高度(如果可能的话...).
I don't understand if this can be easily handled with some specific classes or I have to manually compute the available height (if even possible...).
我无法管理它与边栏一起使用.完整的代码:
I cannot manage it to work with a sidebar. Complete code:
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav id="nav_top" class="navbar navbar-expand navbar-dark bg-dark static-top">
<ul class="navbar-nav d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item">
<h5>
<span class="badge badge-secondary">BLABLA</span>
</h5>
</li>
</ul>
</nav>
<div id="wrapper">
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<span>NAV 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">
<span>NAV 2</span>
</a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">Current page</li>
</ol>
<button type="button" class="btn btn-info mb-3">BUTTON</button>
<div id="content" class="row overflow-auto">
<div class="col-12 table-responsive">
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">COL 1</th>
<th scope="col">COL 2</th>
<th scope="col">COL 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
我不清楚什么因素会影响 overflow-auto 行为.我需要 row/col div以保持边距.
It's not clear to me what affect the overflow-auto behavior. I need the row/col divs in order to keep margins.
推荐答案
我认为您想为此使用flexbox ...
I think you'd want to use flexbox for this...
<body class="vh-100 d-flex flex-column overflow-hidden">
<nav> <-- top nav bar -->
<ol> <-- breadcrumb -->
<div> <-- row with buttons -->
<div class="overflow-auto">
<table> <-- run-time growing table -->
</div>
<footer class="mt-auto"> <-- sticky footer -->
</body>
-
vh-100-使整个身体的视口高度 -
d-flex flex-column-使主体显示:flex，flex-direction:column -
overflow-hidden-防止主体滚动 -
mt-auto-使页脚粘在底部 vh-100- makes the entire body viewport heightd-flex flex-column- make the body display:flex, flex-direction:columnoverflow-hidden- prevents the body from scrollingmt-auto- to make the footer stick the the bottom
演示: https://www.codeply.com/go/FSrBOdRVFG
Demo: https://www.codeply.com/go/FSrBOdRVFG
基本上，此问题已在以下情况得到解答:
Bootstrap 4行填充剩余高度
如何使行拉伸剩余高度
引导程序4:可滚动的行，可填充剩余的高度
Basically this has been answered before:
Bootstrap 4 row fill remaining height
How to make the row stretch remaining height
Bootstrap 4: Scrollable row, which fills remaining height
这篇关于设置最大高度以填充所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
