在做移動端頁面的時候，經常會碰到一個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实现左侧固定宽度右侧内容可滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。