如何左列固定和引导4右滚动，反应灵敏？如何左列固定和引导4右滚动，反应灵敏？(How to left

我使用的是4角，引导4和试图执行一个固定的滚动右股利和一个固定的左股利。 它应该非常相似， Trulia的了。

自举下降4版词缀jQuery插件所以这种方法不再有效，他们建议使用位置：粘粘的，但我不能得到它的工作。

请帮忙！

的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:

我不知道，如果你只是想用1个固定侧的布局，或一侧是固定的，直到它到达页脚（如Trulia的）。 这里有一个简单的布局与固定左侧（斯普利特50 50）。

body, html {
    height: 100%;
}

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

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

为了使固定侧（或粘性）只在一个特定的点， position:sticky并不在所有浏览器很好地工作。 我会使用一个插件或填充工具如下解释： 如何使用粘性保持侧边栏可见自举4 CSS位置

更新引导4.0.0 -的fixed-top现类是在引导，可以在左侧栏可用于去除认为需要的额外CSS position:fixed 。

更新引导4.1 -在h-100级现已消除，需要为额外的CSS height:100% https://www.codeply.com/go/ySC2l4xcEi

响应 -正如在评论中提到，媒体查询可用于使布局响应： https://www.codeply.com/go/pqzJB4thBY

---

有关：
上右侧固定山口
如何创建与引导4固定侧边栏布局？

文章来源: How to left column fixed and right scrollable in Bootstrap 4, responsive?