twitter bootstrap - ¿Cómo se fija la columna izquierda y se puede desplazar hacia la derecha en Bootstrap 4, sensible?

twitter-bootstrap sticky

Question

Estoy usando Angular 4, Bootstrap 4 e intento implementar un div derecho fijo desplazable y un div izquierdo fijo. Debería ser muy similar a lo que tiene Trulia .

Bootstrap eliminó el complemento Affix jQuery en la versión 4, por lo que este método ya no es válido, recomiendan usar position: sticky, pero no puedo hacerlo funcionar.

¡Por favor ayuda!

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

No estoy seguro si simplemente desea un diseño con 1 lado fijo, o para que el lado se repare hasta que llegue al pie de página (como Trulia). Aquí hay un diseño simple con el lado izquierdo fijo (Split 50 50).

body, html {
    height: 100%;
}

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

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

Para fijar el lado (o adhesivo) solo en un punto específico, position:sticky no funciona muy bien en todos los navegadores. Usaría un complemento o polyfill como se explica aquí: Cómo usar la posición CSS fija para mantener una barra lateral visible con Bootstrap 4

Actualizar Bootstrap 4.0.0 : la clase de fixed-top ahora está en Bootstrap, que se puede usar en la columna del lado izquierdo para eliminar el CSS adicional que se requería para la position:fixed .

Actualización Bootstrap 4.1 : la clase h-100 ahora está disponible, lo que elimina el CSS adicional que se necesitaba para la height:100% : https://www.codeply.com/go/ySC2l4xcEi

Receptivo : como se menciona en los comentarios, se puede usar una consulta de medios para que el diseño responda: https://www.codeply.com/go/pqzJB4thBY

Relacionado:
columna fija en el lado derecho
¿Cómo crear un diseño de barra lateral fijo con Bootstrap 4?