<分区>
HTML Bootstrap div 高度应该占据所有剩余空间
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>CRIBBEO</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png" sizes="64x64" />
</head>
<body style="background-color: #6a9acd">
<nav class="navbar navbar-default" role="navigation" style="background-color: #486A86;color:white;height: 60px">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color: white" href="#">Cribbeo</a>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li><a style="color: white" href="#">Inicio</a></li>
<li><a style="color: white" href="#">Ayuda</a></li>
<li><a style="color: white" href="#">Contacto</a></li>
</ul>
<!-- social media icons -->
<ul class="nav navbar-nav navbar-right social">
<li><a href="#"><i class="fa fa-lg fa-facebook" style="font-size:26px;color:white"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-instagram" style="font-size:26px;color:white"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-twitter" style="font-size:26px;color:white"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-youtube" style="font-size:26px;color:white"></i></a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid fill" >
<div class="row" >
<div class="col-md-6" style="color:white;background-color: red; height: 100%">
<div style="margin: auto;">
<img src="images/logohorizontal.png" alt="Cribbeo" width="200px">
<H4>
EL MERCADO DE PIEZAS DE SEGUNDA MANO ESTA A PUNTO DE CAMBIAR
</H4>
<H1 >
¿ QUIERES FORMAR PARTE?
</H1>
<div class="logo_tiendas">
<img src="images/app-store.png" alt="Cribbeo App" width="204" height="62">
<img src="images/play-store.png" alt="Cribbeo App" width="204" height="62">
</div>
</div>
</div>
<div class="col-md-6" style="color:white;background-color: yellow">
<div class="row">
adios
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" style="background-color: #486A86;color:white;height: 60px">
<div class="container" >
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这是文件 custom.css:
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #777;
}
.social .fa-facebook:hover {
color: #4060A5;
}
.social .fa-twitter:hover {
color: #00ABE3;
}
.social .fa-google-plus:hover {
color: #e64522;
}
.social .fa-linkedin:hover {
color: #0094BC;
}
.fill {
min-height: 100%;
height: 100%;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background-color: lightblue;
}
这是当前的输出:
如您所见，有两列，一列为红色背景，一列为黄色背景。 我希望两列都具有从页眉到页脚的高度空间。 我试过设置 style: height=100%，但不起作用。
我应该更改什么才能使两列的高度都达到页眉和页脚之间的剩余空间？
最佳答案
定义高度可能不会直接影响 div 的高度，请尝试使用 min 明确告诉 。div 具有最小高度-高度
关于HTML Bootstrap div 高度应该占据所有剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50950584/