我正在使用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>
的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;
}
答案 0 :(得分:5)
我不确定你是否只是想要一个固定侧面的布局,或者一边是固定边直到它到达页脚(如Trulia)。这是一个简单的布局,左侧是固定的(Split 50 50)。
body, html {
height: 100%;
}
#left {
position: fixed;
top: 0;
bottom: 0;
}
https://www.codeply.com/go/IuOp3nvCpy
要使某一方仅在特定点固定(或粘性),position:sticky
在所有浏览器中都无法正常工作。我按照此处的说明使用插件或填充:How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
更新Bootstrap 4.0.0 - fixed-top
类现在位于Bootstrap中,可以在左侧列中使用,以删除position:fixed
所需的额外css
更新Bootstrap 4.1 - h-100
类现已推出,消除了height:100%
所需的额外CSS:https://www.codeply.com/go/ySC2l4xcEi
自适应 - 如评论中所述,媒体查询可用于使布局响应:https://www.codeply.com/go/pqzJB4thBY
<小时/> 相关阅读: