Comment faire pour supprimer la colonne gauche et la faire défiler vers la droite dans Bootstrap 4, réactif?

Question

J'utilise Angular 4, Bootstrap 4 et j'essaie d'implémenter un div à droite défilant et un div à gauche fixe. Il devrait très similaire à ce que Trulia a. Bootstrap a abandonné le plugin Affix jQuery en version 4, donc cette méthode n'est plus valide, ils recommandent d'utiliser position: sticky, mais je ne peux pas le faire fonctionner.

Aidez s'il vous plaît!

index.html

<div class="container-fluid"> 
    <div class="row h-100"> 
    <div class="col-md-6"> 
     <div id="left-container"> 
     <div class="search-property"> 
      <input type="text"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div id="right-container"> 
     <app-home-right></app-home-right> 
     </div> 
    </div> 
    </div> 
</div> 

style.css

#left-container { 
    height: 100%; 

    position: fixed; 
    width: inherit; 
} 

#right-container { 
    position: absolute; 
} 

.search-property { 
    position: relative; 
    top: 50%; 
    transform: perspective(1px) translateY(-50%); 
    margin-left: 50%; 
} 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

.border { 
    border: 1px solid black; 
} 

Answer 1

Je ne suis pas sûr si vous voulez simplement une mise en page avec 1 côté fixe, ou pour le côté à fixer jusqu'à ce qu'il atteigne le pied de page (comme Trulia).

Voici une disposition simple avec le côté gauche fixe (Split 50 50).

body, html { 
    height: 100%; 
} 

#left { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

https://www.codeply.com/go/IuOp3nvCpy

Pour rendre le côté fixe (ou collant) seulement à un point précis, position:sticky ne fonctionne pas très bien dans tous les navigateurs. J'utiliser un plugin ou polyfill comme expliqué ici: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

---

similaires avec fixed col on right side