bootstrap layout with collapsible footer

Question

I would like to have a layout like below. The top header (non-sticky) and bottom notifications panel. We are planning to display scrollable text in the notifications panel. We would also like to have user to collapse this panel down, so that he can only see this when he wants to.

1. How can I design a such a layout using bootstrap (I am using the latest version)
2. The height of the notifications panel can be fixed via css.

I tried the following markup but I am having following issues with it.

1. I am not able to set the percent height (to support different monitors) for the bottom div
2. I do not know how to make it collapsible (bootstrap accordion may be?).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-12">
        <h3>Heading</h3><hr/>
    </div>
</div>
<div class="footer navbar-fixed-bottom">
        <h4>Notifications</h4><hr/>
</div>

Answer 1

You can also use bootstraps collapse

Here's a simple example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-12">
        <h3>Heading</h3><hr/>
    </div>
</div>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle
</a>
<div id="collapseExample" class="footer navbar-fixed-bottom">
<h4>Notifications</h4><hr/>
</div>