1、<html>
<divid="root"style="width:100%height:100%">
<divclassName="outer-container">
<divclassname="inner-container">
<divclassName="container">
</div>
</div>
</div>
</div>
2、CSS：
.outer-container{
width:100%
height:100%
overflow:hidden
}
.inner-container{
width:100%
height:100%
overflow:auto
box-sizing:content-box
padding-right:17px
}
扩展资料：使用 overflow:hidden 隐藏滚动条，但存在的问题是页面或元素失去了滚动的特性，由于只需要兼容移动浏览器（Chrome和Safari）
应用如下CSS可以隐藏滚动条：
.element::-webkit-scrollbar{display:none}
如果要兼容PC其他浏览器（IE、Firefox等），在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。
记录一下日常开发...之前开发隐藏 div 滚动条，都是通过设置外出 div 为 overflow: hidden , 然后设置内层 div 的宽度略大于外层 div ，这种做法限制很多，需要确定内外层 div 的宽度，没办法自适应多种分辨率的屏幕，而且开发调试起来很麻烦。
总结一下，隐藏 div 滚动条的几种方式
1、使用滚动条来显示溢出的内容。overflow：scroll。（无论div中的内容是否溢出，都会出现滚动条框）
2、使用滚动条来隐藏溢出的内容。
overflow：hidden。（div中溢出的部分呗隐藏）
3、设置浏览器自动处理溢出内容。
overflow：auto。 （当div的内容没有溢出的时候显示正常状况，当溢出后自动为其加上滚动条）
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
