html - Bootstrap 4 Scrollable Div 占用屏幕中间剩余高度-6ren

html - Bootstrap 4 Scrollable Div 占用屏幕中间剩余高度

转载作者：行者123 更新时间：2023-12-04 14:17:12

我正在尝试使用带有 6 个 div 的 Bootstrap 4 设计一个页面，我需要 DIV #4 来占据剩余的高度并可滚动。

Divs 1-3 会略微动态，而不是固定高度。 Div 5 和 6 是一样的。 Div 4 应占据屏幕的剩余部分，但内容可能更长，因此需要滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0px;
        }
    </style>
</head>
<body>
<div class="d-flex flex-column h-100">
    <div style="background-color: #000000; width:100%; margin: 0 auto; color: white;">
        VARIABLE CONTENT
    </div>

    <div style="background-color: blue; width:100%; margin: 0 auto;">
        <table width="100%">
            <tr>
                <td style="color: white;">Firstname LastName</td>
                <form name="RankingForm" id="RankingForm">
                    <td>
                        <select name="Ranking" id="Ranking">
                            <option>
                        </select>
                    </td>
                </form>
            </tr>
        </table>
    </div>

    <div style="background-color: cyan; width:100%; margin: 0 auto;" class="flex-grow-0">
        CONTENT
    </div>

    <div class="flex-grow-1" style="width:100%; overflow:scroll; margin: 0 auto;">
        <div style="width:100%;">
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
        </div>
    </div>

    <div class="w-100" style="background-color: #d0d0d0; margin: 0 auto;">
        CONTENT
    </div>
</body>
</html>

Generated UI, where bottom div is not at the bottom

如有任何帮助，我们将不胜感激。

最佳答案

如评论所示，flexbox是你想要做的三明治风格。但是，我相信它是在 4.1 之后引入的。因此，此解决方案仅在您的 Bootstrap 版本 >= 4.1 时才有效。

您在代码中犯了一些错误。您正在使用内联样式作为类 class="flex-grow: 0" ，您要么将它们放入 style="flex-grow: 0"或 class="flex-grow-0" .

保持最后一个的固定高度 <div>或其他<div>你想要，你要么给它一个height: somenumberhere px或 height: somenumberhere vh .

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>

<body>
<div class="d-flex flex-column h-100">

    <div style="background-color: #000000; width:100%; margin: 0 auto; color: white;">
        VARIABLE CONTENT
    </div>

    <div style="background-color: blue; width:100%; margin: 0 auto;">
        <table width="100%">
            <tr>
                <td style="color: white;">Firstname LastName</td>
                <form name="RankingForm" id="RankingForm">
                    <td>
                        <select name="Ranking" id="Ranking">
                            <option>
                        </select>
                    </td>
                </form>
            </tr>
        </table>
    </div>

    <div style="background-color: cyan; width:100%; margin: 0 auto;" class="flex-grow: 0">
        CONTENT
    </div>

    <div class="flex-grow-1" style="width:100%; overflow:scroll; margin: 0 auto;">
        <div style="width:100%;">
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
            <p>VARIABLE CONTENT THAT COULD BE LONG
        </div>
    </div>

    <div class="w-100" style="background-color: #d0d0d0; margin: 0 auto;">
        CONTENT
    </div>
</body>

关于html - Bootstrap 4 Scrollable Div 占用屏幕中间剩余高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59057698/

文章推荐： pivot - 交易 View 图表松树编辑器中指标的自动缩放禁用

文章推荐： windbg - 错误 :Symbol File not found in WinDbg

文章推荐： ruby-on-rails - Rails 管理 - 自定义 has_many

mysql - SQL - 剩余/不属于
我正在运行一个带有 while 约束的 SQL 查询，其中包含一些“id”。例如: SELECT table.id FROM TableOne table WHERE table.id IN (1,
Python:在一行中优雅地打印列表中的所有*剩余*元素
我正在寻找在替换其中一个元素后打印元素列表的最正确方法。我可以按如下方式做，但显然很困惑。 #!/usr/bin/python import sys file = open(sys.argv[1])
HTML 不是 100% 剩余
这个问题在这里已经有了答案: How wide is the default `` margin? (4 个答案) How do I remove the top margin in a web
ubuntu - curl:(18)传输关闭，剩余 804285 个字节要读取
当我尝试使用命令安装 rvm 时::(I am Using UBUNTU 12.04 LTS) curl -L https://get.rvm.io | bash -s 当我尝试与简单用户相同的命令时
ubuntu - curl:(18)传输关闭，剩余 2 个字节要读取
我使用 GOPro 工作人员 6 个月前发送给我的命令，通过终端(在 Gopro 网络上)使用 Gopro Hero3 拍摄照片/视频。有效。但是，在过去的一个月里，我一直在尝试再次执行此操作，并且不
android - 所有 Activity 已关闭，剩余 5 个线程
尽管知道我不应该关闭应用程序按钮，但我仍然这样做。完成所有 Activity 后，我调用 finish() 方法，它们调用析构函数和所有内容。用户的行为也是正确的。但我想知道为什么还有 5 个打开的线
java - 使用组时 Spring Boot 2 剩余 validator 调用两次
当我在 Rest Controller 中的类级别启用 @Validated spring 注释时，会生成 2 个验证上下文(每个验证上下文都有不同的前缀)。 @Validated 注释是必需的，因为
instagram-api - 您如何查看您当前的 Instagram 剩余 API 调用(速率)限制？
在旧的 API 中，剩余的允许容量显然作为 X-Ratelimit-Remaining 返回HTTP header 。然而，current version's documentation对此一无所获
azure-service-fabric - Azure Service Fabric - 部署失败，剩余 1 个分区
我一直在使用 Service Fabric 一段时间，成功构建、部署和测试了多个服务，但我刚刚完成构建的服务在部署时失败(请参阅下面的错误)。在诊断中，我尝试使用 VS 模板(没有代码更改)创建和部署
android - 如何覆盖进度条进度消息，即 61/100 到自定义消息，因为 100 剩余 0
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Progress unit in ProgressDialog 如何覆盖进度条进度消息，即 61/100 到
objective-c - 在 Objective C 中解析此字符串 : 60. 56MB/237.03MB 1526kbps 25.5%，剩余 00:15:47
我正在用 Objective-C (Cocoa) 编写命令行实用程序的前端。我需要解析输出以检查不同类型的消息。有两种基本类型；信息消息和下载状态消息。信息消息始终以以下内容之一开头:INFO:、WA

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 4 Scrollable Div 占用屏幕中间剩余高度