Twitter Bootstrap - 让行占用剩余高度
在人们将此问题标记为重复之前，让我告诉大家我已经尝试了之前在SO中提出的所有建议，尤其是display: table。这不适用于Bootstrap。
我想要达到的目标是： -
---------------------
| Nav Bar |
|-------------------|
| |Body | |
| | | |
|______|_____|______|
| | | |
| | | |
|______|_____|______|
导航栏必须位于顶部。身体的其余部分必须有6个div，每个div占4列。
身体部位的高度必须设置为剩余高度，因为导航栏会根据调整大小而改变。
由于兼容浏览器，我正在避免使用flexbox解决方案。并且更喜欢只有CSS解决方案。
这是我正在使用的代码 - ：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!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>
评论后的任何内容＆＃34;第二个容器＆＃34;需要动态占据高度。
3 个答案:
答案 0 :(得分：1)
你在正确的轨道上看display:table。但是你需要进一步增加行和单元样式。通过使用display:table-row创建行并将container-fluid元素添加为display:table-cell，您可以让他们按需要推送空间而不会溢出。另一个技巧是通过将body display:inline-block和font-size设置为0来处理body元素内的line-height元素来对抗由tabbed html创建的空白区域，然后重置这些元素内联块元素内的值。 请注意，因为您正在使用col-lg-4，所以您需要使jsfiddle窗口足够宽，以便它们成为列。
display:inline-block以离开＆＃34;差距而闻名。物品之间。这是因为＆＃34;空白＆＃34;格式化代码之间。有一个great article关于通过评论，跳过结束标签或字体大小来解决这个问题。就个人而言，字体大小更容易维护。
将display:inline-block用于display:table以外的包含元素的原因主要是由于firefox错误导致display:table无法正确呈现，您可以在此处找到解决方案：{{ 3}}
<强> CSS height 100% in firefox not working
<强> HTML
<div id="outerContainer">
<div class="display-table">
<div class="display-table-row" id="navigation">
<div class="container-fluid first_wrapper display-table-cell">
<!-- 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>
</div>
<div class="display-table-row">
<div class="container-fluid display-table-cell">
<div class="row">
<div class="col-lg-4" style="background-color:red;"></div>
<div class="col-lg-4" style="background-color:green;"></div>
<div class="col-lg-4" style="background-color:pink;"></div>
</div>
</div>
</div>
<div class="display-table-row">
<div class="container-fluid display-table-cell">
<div class="row">
<div class="col-lg-4" style="background-color:green;"></div>
<div class="col-lg-4" style="background-color:red;"></div>
<div class="col-lg-4" style="background-color:blue;"></div>
</div>
</div>
</div>
</div>
</div>
<强> CSS
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
font-size:0;
line-height:0;
}
.first_wrapper {
padding: 0px;
margin: 0px;
}
.navbar {
margin: 0px;
}
#outerContainer{
display: inline-block;
height:100%;
width:100%;
font-size:14px;
line-height:1.42857143;
}
.display-table{
display:table;
height:100%;
width:100%;
}
.display-table-row{
display:table-row;
width:100%;
height:50%;
}
.display-table-cell{
display:table-cell;
width:100%;
}
.display-table-cell > .row{
height:100%;
}
.display-table-cell > .row > [class*="col-"]{
height:100%;
}
#navigation.display-table-row{
height:auto;
}
答案 1 :(得分：0)
你想这样吗？
您必须拨打此CDN
＆＃13;
＆＃13;
这是完整的脚本＆＃13;
＆＃13;
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<!-- Latest compiled and minified JavaScript -->
<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>
答案 2 :(得分：-1)
您可以使用CSS calc作为容器的高度减去导航栏高度。
<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 full">
<div class="row half">
<div class="col-lg-4" style="background-color:red;"></div>
<div class="col-lg-4" style="background-color:green;"></div>
<div class="col-lg-4" style="background-color:pink;"></div>
</div>
<div class="row half">
<div class="col-lg-4" style="background-color:green;"></div>
<div class="col-lg-4" style="background-color:red;"></div>
<div class="col-lg-4" style="background-color:blue;"></div>
</div>
</div>
CSS：
.full {
height: calc(100% - 52px);
}
.half {
height: 50%;
}
.half > .col-lg-4 {
height: 100%;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？