stackoverflownewbie stackoverflownewbie - 4 months ago 24
PHP Question

Bootstrap jumbotron automatically changes size with amount of content

I have the following view page code (uses codeigniter, bootstrap and PHP). I have given only the code between

<body>
and
</body>
as well as the 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>


My css is:

html,body {
height:100%;
}
.jumbotron {
height:100%;
padding-bottom:0px;
}
#tasks {
margin-top:20px;
padding-top:20px;
}
#replaceable {
padding-top:50px;
padding-bottom:100px
}


The problem is that the jumbotron changes size with changing the amount of content in the page. How do I get a jumbotron that will occupy full height of the containing element no matter how much content is there (i.e Jumbotron height should extend up to navbar and footer no matter what)?

Answer

As you mentioned, if the navbar and footer divs are positioned fixed, then you can apply your css like:

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

EXAMPLE: See JSFiddle here

Comments