一段时间以来,我一直致力于聊天室布局,我的网站(我将展示)的主要概念是我有一个固定的导航栏和一个固定的底部页脚 (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>
关于html - 当高度设置为 100% 时网格显示整页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58679383/