How to left column fixed and right scrollable in Bootstrap 4, responsive?

后端 未结 1 868
臣服心动
臣服心动 2020-11-30 08:13

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

相关标签:
1条回答
  • 2020-11-30 09:03

    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


    Related:
    [fixed col on right side](https://stackoverflow.com/questions/48972833/bootstrap-col-fixed-position/48974617#48974617)
    https://stackoverflow.com/questions/40497288/how-to-create-a-fixed-sidebar-layout-with-bootstrap-4/49436717#49436717
    0 讨论(0)
提交回复
热议问题