CH4-5(模組化)隱藏拉bar條
有時客戶的需求是選單固定在左右,當內容高度超過時,希望不顯示拉bar。 透過兩層div與css將有拉bar的內層往右推來隱藏
HTML
<div class="over_hidden">
<div class="col-sm-6 col-xs-12 detail">
<!--這裏面放內容-->
</div>
</div>
CSS
/*內容外層設定高度來產生拉bar*/
.half_content .col-sm-6.detail{
width: 100%;
padding: 60px 60px 150px 30px;
height:46.5vw;
overflow-y: scroll;
transform: translateX(16px);
}
/*最外層將多餘的隱藏,並將內容推回去*/
.half_content .over_hidden{
overflow: hidden;
margin-left: 45%;
transform: translateX(-15px);
}