我正在使用Angular 4,Bootstrap 4并尝试实现固定的可滚动右div和固定的左div.它应该与Trulia非常相似.
Bootstrap在版本4中删除了Affix jQuery插件,所以这个方法不再有效,他们建议使用position:sticky,但我无法让它工作.
请帮忙!
的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>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)