我有以下视图页面代码（使用codeigniter、bootstrap和PHP）。我只给出了<body>和</body>之间的代码以及CSS。
<div class="row">
<?php echo $navbar; ?>
</div>
<div class="row">
<div class="jumbotron">
<div class="container">
<div id="tasks" class="col-md-2">
<?php echo $task_set; ?>
</div>
<div id="replaceable" class="col-md-9 col-md-offset-1">
<div id="current_view">
<?php if(isset($current_view)) echo $current_view ;?>
</div>
<div id="pass_chg_form" style="display:none;">
<?php echo $pass_change_form; ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<?php echo $footer; ?>
</div>
<script>
CKEDITOR.replace( 'editArea' ); //replace text area with ckeeditor
</script>
我的css是：
html,body {
height:100%;
}
.jumbotron {
height:100%;
padding-bottom:0px;
}
#tasks {
margin-top:20px;
padding-top:20px;
}
#replaceable {
padding-top:50px;
padding-bottom:100px
}
问题是jumbotron会随着页面内容量的变化而改变大小。如何获得一个jumbotron，它将占据包含元素的整个高度，而不管内容有多少（即jumbotron的高度应该延伸到navbar和footer，不管是什么）？
最佳答案
如您所述，如果navbar和footerdiv的位置是固定的，那么您可以应用您的css，如下所示：
<style type="text/css">
.navbar {
color: white;
background: #333;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
height: 50px;
}
.footer {
color: white;
background: #333;
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: 50px;
}
.jumbotron {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
margin: 0;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
</style>
示例：See JSFiddle here
关于php - Bootstrap Jumbotron随内容量自动更改大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36633137/