gpt4 book ai didi

html - Twitter Bootstrap - 让行占据剩余高度

转载 作者:太空宇宙 更新时间:2023-11-03 19:28:52 25 4
gpt4 key购买 nike

在人们将这个问题标记为重复之前,让我告诉大家我已经尝试了之前在 SO 中给出的所有建议,尤其是 display: table。这不适用于 Bootstrap。

我想要实现的是:

---------------------
| Nav Bar |
|-------------------|
| |Body | |
| | | |
|______|_____|______|
| | | |
| | | |
|______|_____|______|

导航栏必须在顶部。正文的其余部分必须有 6 个 div,每个 div 占据 4 列。

主体部分的高度必须设置为剩余高度,因为导航栏会根据调整大小而变化。

由于浏览器兼容,我避免使用 flexbox 解决方案。并且更喜欢唯一的 CSS 解决方案。

这是我正在使用的代码:

<!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>

注释“Second Container”之后的任何内容都需要动态占据高度。

最佳答案

您在查看 display:table 时走在了正确的轨道上。但是您还需要通过添加行和单元格样式来更进一步。通过使用 display:table-row 创建行并将 container-fluid 元素添加为 display:table-cell 你可以拥有它们插入空间的需要而不会溢出。另一个技巧是通过设置正文 font-sizeline-height 到 0 以对抗标签式 html 创建的空白,然后您在 inline-block 元素内重置这些值。 请注意,因为您使用的是 col-lg-4,所以您需要使 jsfiddle 窗口足够宽,以便它们成为列。

display:inline-block 因在元素之间留下“间隙”而臭名昭著。这是因为格式化代码之间的“空白”。有一个 great article关于通过评论、跳过结束标记或字体大小来解决这个问题。就个人而言,字体大小更容易维护。

display:table 上使用 display:inline-block 的原因主要是由于 firefox 的一个错误,其中 display:table 没有正确呈现,您可以在此处找到解决方案:CSS height 100% in firefox not working

JSFIDDLE

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;
}

关于html - Twitter Bootstrap - 让行占据剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41015768/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com