html - 设置最大高度以填充所有可用空间-6ren

html - 设置最大高度以填充所有可用空间

转载作者：行者123 更新时间：2023-11-27 22:52:49

27

4

我的网络应用程序在页面中放置了一些区域。基本上:

<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 值，它就可以工作。

相反，我的目标是填充前一个 div(带按钮的行)和粘性页脚之间的所有可用空间(因此这取决于浏览器、宽度等...)。

换句话说，我希望用户始终看到页脚，以便当表格到达页脚时，溢出功能应该开始工作。

我不明白这是否可以通过某些特定类轻松处理，或者我必须手动计算可用高度(如果可能...)。

更新

我无法管理它与侧边栏一起工作。完整代码:

<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 以保持边距。

最佳答案

我想你会想为此使用 flexbox...

<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 - 使整个 body 视口(viewport)高度
d-flex flex-column - 使 body display:flex, flex-direction:column
overflow-hidden - 防止正文滚动
mt-auto - 让页脚贴在底部

演示:https://www.codeply.com/go/FSrBOdRVFG

基本上这已经回答过: Bootstrap 4 row fill remaining height
How to make the row stretch remaining height
Bootstrap 4: Scrollable row, which fills remaining height

关于html - 设置最大高度以填充所有可用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58458873/

27

4

0

文章推荐： css - 使用与顶级菜单相同颜色的子菜单

文章推荐： c++ - 对对象的引用必须在构造函数基类/成员初始化列表中初始化

文章推荐： html - 带有图像的 CSS 形状 mask

delphi - 检测到机器是否已连接/可用？
如何检测当前网络中计算机是否已连接/可用。当然，它有多种用途，但我主要关心的是我的应用程序使用位于特定计算机中的资源，如果这些资源不可用，它甚至不会尝试连接，而是使用本地资源。最佳答案您可以尝试
javascript - 延迟函数直到 $ 可用
雅虎建议load scripts at the bottom of an HTML pages出于性能原因。我使用遵守规则的 HTML5 Boilerplate。这种方法的问题是 jQuery 也是
javascript - 如何使组件仅对少数用户可见/可用？
我有一个场景，我需要只向管理员而不是普通用户展示一个组件。说， // This component should be rendered for public users.
javascript - 将数组转换为具有默认值的对象的更简洁的方法？ (Lodash 可用)
我有一个数组，比方说 ["a","b","c"]，我想把它变成一个对象，它以数组值作为键和一个默认值我可以设置。因此，如果默认值为 true，我希望我的输出为 {a:true, b:true, c:t
.net - 如何使在该函数中可访问的函数中创建的 PSDrive 可用？
我假设在函数中创建一个新的 PS-Drive 会使该驱动器只能在该函数中访问。如何通过从该函数可访问的 MAIN 调用函数来创建 PS 驱动器？ $temproraryPSDriveName =
.net - 可用 .net 控件库的比较
您会推荐哪些 .net 控制库作为企业必备的？可以免费/非免费至少应该包含一个真正强大的Datagrid Ajax 功能有没有可用的比较？最佳答案我用过 Telerik ASP.NET控制之
javascript - 无法获取所选文本的容器(可用 jsfiddle)
假设我有一些像这样的 html: Hello World Javascript代码: var fooBar = document.getElementById('fooBar'); fooBar.
dart - Flutter 相机插件无法导入/可用
开始实现 camera plugin 时出现以下错误在我的 flutter 应用程序上: [VERBOSE-2:dart_error.cc(16)] Unhandled exception:
java - 我应该在哪里正确声明我的 "count"可用？
我想知道应该在哪里正确放置 countA，因为我希望将计数添加到所做的每个按钮中。开头的“count”变量用于制作新按钮，“countA”是我试图声明的计数，但它无法编译。这是我的代码片段:我的问题再
python - 可用 **kwargs 列表
在python帮助文档中我经常看到带有函数名和命名参数的签名行，然后你会看到**kwarg(关键字参数)。 list? 打印到帮助文档字符串: Init signature: list(self, /
c# - 可用 UWP 菜单控件之间的区别
我是 UWP 的新手，想知道“Flyout”、“ContextFlyout”和“Popup”之间的区别。另外，我想知道“AppBar”和“CommandBar”之间的区别。我相信这些是容纳菜单或菜单项
android - 可用 Wifi 设备列表
我想显示可用的 Wifi 设备列表。这是我的代码，我不明白这里有什么错误: wifi = (WifiManager) getSystemService(Context.WIFI_SERVICE); i
javascript - 使函数仅对其原型(prototype)可用
这是我的代码: Random = function(name) { this.name = name; this.addSomething = function(a, b) {
ios - 使按钮连续动画，可用 - Swift
我希望我的按钮持续动画直到用户触摸它，这是代码 func animate() { UIView.animateWithDuration(1, animations: { () -> Void
java - 阻塞直到 DataInputStream 可用
我正在为我正在参加的类(class)制作一个 HTTP 服务器作为项目，一周来我一直在尝试寻找解决方案。我有一个 DataInputStream，我需要等待客户端向我发送 http 请求，由于连接保持
linux - 如何仅打印特定范围内关闭(可用)的端口？
我想创建一个 bash 脚本来检查我的 Linux 服务器中的哪些端口已关闭且未在特定范围(端口范围 (3000-3010))中使用。打印输出只需1个端口，如果将输出保存为变量或保存在同一个文件中，
c - 如何让我的设备对 QEMU 可用
我写了一个我认为是最小的自定义设备来测试我对 QOM 和 QEMU 的总体理解。以下是省略注释的相关代码。不幸的是，当我启动 guest 并将我的设备名称作为命令行参数传递时，它无法找到我的设备并退出
python - opencv中有哪些常量(代码)可用
调用Opencv函数时，通常会提供一个常量给函数调用，如: im_hsv = cv2.cvtColor(im, cv2.COLOR_BGR2HSV) 虽然我找不到对所有可用常量的引用。 Opencv
c++ - 标准化之前多长时间 `string` 可用？
C++ 于 1998 年正式标准化，但我们能在多久以前找到一个名为 string 的类，它看起来像 C++2003 中的 std::string预标准 C++ 实现？我问是因为 CString 作为
git - 可用 --porcelain 选项的命令列表
是否有一个官方的(或可能没有)git 命令列表，--porcelain 选项可用？或者我应该在 the porcelain commands list 中手动查看它们中的每一个吗？？我已经设法用谷

首页

博学

6Ren·AI

商城

html - 设置最大高度以填充所有可用空间

更新