How to setup a master-detail page with Bootstrap? - html

Question

I'm having trouble setting up a "master-detail" view using Bootstrap 3. I'm attaching a picture of the specific layout I'm trying to get:
I've created a div with .row spanning the 12 columns for the header, and then another div.row with a div.col-md-4 and div.col-md-8 for the two columns. But obviously this doesn't achieve what I'm looking for. I've tried playing with the position attribute, but it seems to conflict with the Bootstrap CSS and I always just get jumbled text.
Thank you very much in advance and let me know if you'd like me to provide more details on what I'm looking for. Hopefully the pic is clear.

Answer 1

You are looking for
position: fixed;
This ensures that the element is always static relative to the viewport. You will then use the relative positioning properties to place it where you want it to go.
For the top element (say, your navbar), you can set:
top: 0;
For the bottom element, you can set:
bottom: 0;
So, something like this:
.row, .col-md-4, .col-md-8 {
border: 2px solid pink; /* For showing the div borders */
}
.row.main-content {
background-color: blue;
height: 300px;
margin-top: 20px; /* Needs to match the height of .row.top */
}
.row.top {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: red;
z-index: 9999;
}
.row.bottom {
position: fixed;
bottom: 0;
height: 20px;
width: 100%;
background-color: green;
z-index: 9999;
}
.scrollable {
overflow-y: scroll;
height: 300px; /* May need to be set somehow */
}
<div class="container-fluid"><!-- To get it to take up the whole width -->
<div class="row top">
</div><!-- row -->
<div class="row main-content">
<div class="col-md-4">
<div class="sub-header">
</div>
<div class="scrollable">
<!-- menu items here -->
</div>
<div class="sub-footer">
</div>
</div>
<div class="col-md-8 scrollable">
<!-- Product detail goes here -->
</div>
</div><!-- row -->
<div class="row bottom">
</div><!-- row bottom -->
</div><!-- container-fluid -->
Hope that helps.