Question

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

Answer 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

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

1 个答案: