18910140161

Html

首页 >> 前端开发 >> Html

HTML-使bootstrap5 col只转到页脚堆栈溢出

顺晟科技

2022-10-19 11:40:46

82

对于这个项目，我必须显示一个特定的email adress邮箱。特别是我需要‘邮件卡列表’是一个可滚动的组件，而不是向下伸展页面，超过页脚。我已经尝试使用“max-height：；”css样式，但它设置了一个固定的高度。我想要一个可变的高度（这样它就可以工作在不同的屏幕大小上，等等）。

i 任何关于如何实现这一点（甚至在哪里寻找）的建议都是很好的。谢谢。

jsfiddle:https://jsfiddle.net/6fr9bh4v/4/

顺晟科技：

  • 替换溢出的内联样式规则，您正在使用引导程序，请使用类.

  • 要使溢出发挥作用，您需要给出它的高度，但是由于它是动态的（要跨设备工作），因此您需要使它viewport

    <!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>TEMP MAIL</title>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">EMAIL</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">Report</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Help</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- MAILBOX PAGE -->
    <div class="container">
        <div class="row">
            <div class="col-10">
                <h1 class="d-flex justify-content-center">
                    <span class="badge bg-secondary m-3">user@domain.com</span>
                </h1>
            </div>
            <div class="col-2 d-flex justify-content-center">
                <button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
                <button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
            </div>

            <hr>

            <!-- BASE - Search component -->
            <div class="col-3">
                <div class="input-group mb-3">
                    <input class="form-control" type="text">
                    <button class="btn btn-outline-success">Search</button>
                    <button class="btn btn-outline-danger">Clear</button>
                </div>
            </div>

            <!-- EMAIL VIEW ONLY | ADD -->
            <div class="col-7">


                <div>
                    <dl class="row">
                        <dt class="col-2 text-end m-0">
                            From:
                        </dt>
                        <dd class="col-10 m-0">
                            Larry
                        </dd>
                        <dt class="col-2 text-end m-0">
                            To:
                        </dt>
                        <dd class="col-10 m-0">
                            Dan
                        </dd>
                        <dt class="col-2 text-end m-0">
                            Date:
                        </dt>
                        <dd class="col-10 m-0">
                            1/1/2000
                        </dd>
                        <dt class="col-2 text-end m-0">
                            Subject:
                        </dt>
                        <dd class="col-10 m-0">
                            Test email!
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="col-2 d-flex justify-content-center">
                <div>
                    <button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
                    <br>
                    <!--
                    <button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
                    -->
                </div>
            </div>

            <hr>

            <!-- EMAIL CARD LIST -->
            <div class="col-3" style="overflow-y: scroll;">
                <!-- EMAIL CARD -->
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 1</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 2</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 3</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
            </div>

            <!-- EMAIL VIEW ONLY -->
            <div class="col-9">SHOW EMAIL HERE</div>
        </div>
    </div>

    <footer class="footer fixed-bottom">
        <div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
            THIS IS A FOOTER
            <br>
            <a class="text-reset fw-bold" href="#">FOOTER LINK</a>
        </div>
    </footer>

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

通过上述更改，您将看到改进，但是您需要考虑其余元素（导航等）的高度。如果以像素为单位，则可以使用css将其从整个视口高度中减去。为相对于视口的自定义高度创建一个类，例如:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>TEMP MAIL</title>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">EMAIL</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">Report</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Help</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- MAILBOX PAGE -->
    <div class="container">
        <div class="row">
            <div class="col-10">
                <h1 class="d-flex justify-content-center">
                    <span class="badge bg-secondary m-3">user@domain.com</span>
                </h1>
            </div>
            <div class="col-2 d-flex justify-content-center">
                <button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
                <button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
            </div>

            <hr>

            <!-- BASE - Search component -->
            <div class="col-3">
                <div class="input-group mb-3">
                    <input class="form-control" type="text">
                    <button class="btn btn-outline-success">Search</button>
                    <button class="btn btn-outline-danger">Clear</button>
                </div>
            </div>

            <!-- EMAIL VIEW ONLY | ADD -->
            <div class="col-7">


                <div>
                    <dl class="row">
                        <dt class="col-2 text-end m-0">
                            From:
                        </dt>
                        <dd class="col-10 m-0">
                            Larry
                        </dd>
                        <dt class="col-2 text-end m-0">
                            To:
                        </dt>
                        <dd class="col-10 m-0">
                            Dan
                        </dd>
                        <dt class="col-2 text-end m-0">
                            Date:
                        </dt>
                        <dd class="col-10 m-0">
                            1/1/2000
                        </dd>
                        <dt class="col-2 text-end m-0">
                            Subject:
                        </dt>
                        <dd class="col-10 m-0">
                            Test email!
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="col-2 d-flex justify-content-center">
                <div>
                    <button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
                    <br>
                    <!--
                    <button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
                    -->
                </div>
            </div>

            <hr>

            <!-- EMAIL CARD LIST -->
            <div class="col-3" style="overflow-y: scroll;">
                <!-- EMAIL CARD -->
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 1</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 2</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 3</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
                <div class="row card mt-1 mb-1">
                    <button class="btn btn-block px-4">
                        <div class="row">Email Subject 4</div>
                        <div class="row">Test@Domain.com</div>
                        <div class="row">TIME</div>
                    </button>
                </div>
            </div>

            <!-- EMAIL VIEW ONLY -->
            <div class="col-9">SHOW EMAIL HERE</div>
        </div>
    </div>

    <footer class="footer fixed-bottom">
        <div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
            THIS IS A FOOTER
            <br>
            <a class="text-reset fw-bold" href="#">FOOTER LINK</a>
        </div>
    </footer>

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
  • 要为页脚留出空间，请在“邮箱页”容器div上添加边距，
  • 从
    • 删除

完整代码:

  • TAG：
上一篇：JavaScript-Custom， 下一篇：htmlphp变量有两个圆点 htm
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！