Bootstrap jumbotron 会根据内容量自动更改大小答案

【问题标题】：Bootstrap jumbotron automatically changes size with amount of contentBootstrap jumbotron 会根据内容量自动更改大小
【发布时间】：2016-08-06 14:23:27
【问题描述】：

我有以下视图页面代码（使用 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 的高度无论如何都应该延伸到导航栏和页脚）？

【问题讨论】：

那么“导航栏”和“页脚”的定位是固定在窗口的顶部和底部吗？如果是，那么可以使用绝对定位。如果不是，则使用“jumbotron”父元素（.row div）需要相对定位，并且子“jumobtron”div 需要设置高度以防止高度偏移。
是的，我的导航栏和页脚固定在窗口的顶部和底部。你说的是绝对定位。你的意思是像 .jumbotron { height:100%;填充底部：0px；位置：绝对； } 代表

标签： php html css twitter-bootstrap codeigniter

【解决方案1】：

正如你所提到的，如果 navbar 和 footer div 的位置是固定的，那么你可以像这样应用你的 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

【讨论】：