html - 高度设置为 100% 时显示整页的网格
问题描述
一段时间以来,我一直在研究聊天室布局,我网站的主要概念(我将展示)是我有一个固定的导航栏和一个固定的底部页脚(Bootstrap 4)。所以在它们之间我添加了一个带有 3 列 (3 + 6 + 3) 的网格系统现在我希望网格系统是高度,以便它覆盖导航栏和页脚之间的整个区域。但问题是当我给他们 100% 的高度时,滚动条会出现并使其成为整页网格。
我的代码:
.dropdown-toggle::after {
content: none;
}
body {
margin: 0;
padding: 0;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25" style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="row no-gutter" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
解决方案
使用 calc() 计算元素的高度:
<style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
</style>
.full_height {
height: calc(100vh - 82px);
overflow: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-dark" style="background-color:#3A5070">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/1156/1156949.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item">
<img src="https://image.flaticon.com/icons/svg/813/813020.svg" width="25"
style="margin-top:10px;margin-right:15px;" />
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="libs/images/icon.png" width="35" />
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"
style="margin-top:7px;border-radius:0px;width:110%;">
<a class="dropdown-item" href="#">Edit Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full_height">
<div class="row no-gutter text-center" style="height:100%">
<div class="col-3" style="background: orange;">col-3</div>
<div class="col-6" style="background:black;color:white;">col-6</div>
<div class="col-3" style="background: orange;">col-3</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-light " style="background-color:#3A5070">
<a class="navbar-brand" href="#"></a>
</nav>
推荐阅读
- javascript - Javascript 应用程序(带有 webpack)未在 heroku 上打开,“应用程序启动超时”
- r - 在 Mongo DB 中使用 dplyr 语法
- apache-spark - 字典数组的总和取决于值条件pyspark(spark结构化流)
- html - 定心
- docker - 带有 httpd24 的 Docker Centos 7
- r - 断棒回归线性混合效应模型
- javascript - Reactjs:我正在根据状态检查单选按钮,但在选中一个单选按钮时无法单击其他单选按钮
- html - 图像未在 React 中显示
- c++ - 遍历 unique_ptr 拥有的内存会产生段错误
- angular - 将数组转换为接口数组