I\'m using Angular 4, Bootstrap 4 and trying to implement a fixed scrollable right div and a fixed left div. It should very similar to what Trulia has.
Bootstrap dro
I'm not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here's a simple layout with fixed left side (Split 50 50).
body, html {
height: 100%;
}
#left {
position: fixed;
top: 0;
bottom: 0;
}
To make the side fixed (or sticky) only at a specific point, position:sticky
doesn't work very well across all browsers. I'd use a plugin or polyfill as explained here: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
https://codeply.com/go/IuOp3nvCpy
Update Bootstrap 4.0.0 - The fixed-top
class is now in Bootstrap which can be used on the left side column to remove the extra css that was required for position:fixed
.
Update Bootstrap 4.1 - The h-100
class is now available which eliminates the extra CSS that was needed for height:100%
: https://codeply.com/go/ySC2l4xcEi
Responsive - As mentioned in the comments, a media query can be used to make the layout responsive: https://codeply.com/go/pqzJB4thBY