html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移動端頁面的時候，經(jīng)常會碰到一個div中分左右兩個div，左側(cè)div固定寬度或百分比，右側(cè)div中內(nèi)容左右溢出，需要左右滑動才可以瀏覽到全部內(nèi)容，為此寫了一個demo。
處理這個問題的核心關(guān)鍵點是右側(cè)div需要設(shè)置固定寬度或者百分比，然后設(shè)置它的overflow為auto或者scroll。一般移動端左右滑動不需要顯示滾動條，此時可以設(shè)置.element::-webkit-scrollbar {display:none}
Demo：
HTML:
模板- gesrhgdsfggggggggggggggdfghfghfddsfgsdgggggggggggggggdsgerwghsdrg
- argergadfgesthsadrfghfghfghg4w6jtdgjgdeyhdarthgrtdrhdzhgqrtygrtyhsrthaehea
- aerhrsthwrthszdthj5ejadtzkmsfghkgdgjghjhjghfnstyxjwfgndghkfxkjhvcxnrtjfdyjhsft
CSS:
.normal-div{
height:300px;
width:100%;
background:red;
}
.second{
background:blue;
}
.third{
position:relative;
background:grey;
font-size:18px;
}
.left{
display:inline-block;
position:absolute;
top:0;
left:0;
background:green;
width:25%;
height:300px;
}
.right{
display:inline-block;
margin-left: 25%;
width:75%;
height:300px;
background:yellow;
overflow-x:scroll;
}
.right::-webkit-scrollbar{
display:none;
}
總結(jié)
以上是生活随笔為你收集整理的html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 沃兹基硕德是什么意思 沃兹基硕德含义详解
- 下一篇： 预计负债为什么确认递延所得税资产，预计负