html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动
生活随笔
收集整理的這篇文章主要介紹了
html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在做移動端頁面的時候，經常會碰到一個div中分左右兩個div，左側div固定寬度或百分比，右側div中內容左右溢出，需要左右滑動才可以瀏覽到全部內容，為此寫了一個demo。
處理這個問題的核心關鍵點是右側div需要設置固定寬度或者百分比，然后設置它的overflow為auto或者scroll。一般移動端左右滑動不需要顯示滾動條，此時可以設置.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;
}
總結
以上是生活随笔為你收集整理的html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 沃兹基硕德是什么意思 沃兹基硕德含义详解
- 下一篇： 预计负债为什么确认递延所得税资产，预计负