在人们将此问题标记为重复之前,让我告诉大家我已经尝试了以前在SO中给出的所有建议,尤其是display: table
。这不适用于Bootstrap。Twitter Bootstrap - 使行占据剩余高度
我想实现的是以下各项:
---------------------
| Nav Bar |
|-------------------|
| |Body | |
| | | |
|______|_____|______|
| | | |
| | | |
|______|_____|______|
导航栏必须在最前面。身体的其余部分必须有6个div,每个div占4列。
由于导航栏将根据调整大小进行更改,因此必须将身体部分的高度设置为剩余高度。
由于浏览器兼容,我避免使用flexbox解决方案。而且更喜欢唯一的CSS解决方案。
这是我using-代码:
任何后
<!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">
<title>Admin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
.first_wrapper {
padding: 0px;
margin: 0px;
}
.navbar {
margin: 0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid first_wrapper">
<!-- Navbar start -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Admin Page</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<!-- Navbar end -->
</div>
<!-- Second Container -->
<div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;">
<div class="row" style="height:100%;width:100%;padding:0px;margin:0px;">
<div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
<div class="col-lg-4" style="height:100%;background-color:red;"></div>
<div class="col-lg-4" style="height:100%;background-color:green;"></div>
<div class="col-lg-4" style="height:100%;background-color:pink;"></div>
</div>
<div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
<div class="col-lg-4" style="height:100%;background-color:green;"></div>
<div class="col-lg-4" style="height:100%;background-color:red;"></div>
<div class="col-lg-4" style="height:100%;background-color:blue;"></div>
</div>
</div>
</div>
</body>
</html>
有JS的选择,如果你犯了一个的jsfiddle你更有可能得到帮助 –
@ Dejan.S的问题已经被编辑到 –
@ZimSystem采取的代码片段并运行它是你的浏览器。第二个容器不能溢出。它必须占用视口的剩余空间。没有滚动。 –