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 滚动条的几种方式
有三种代码输入的方式可以在CSS隐藏滚动条。
详细方法如下：
方法一:
代码如下:
html { overflow-y: scroll}
原理：强制显示ie的垂直滚动条，而忽略水平滚动条；
优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.；
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条；
方法二:(推荐采用)
代码如下:
html { overflow-x: hiddenoverflow-y: auto}
原理：隐藏横向滚动，垂直滚动根据内容自适应；
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现；
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到；
方法三:
代码如下:
body { margin-right: -15pxmargin-bottom: -15px}
原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象；
优点：在视觉上解决了这个问题，垂直滚动根据内容自适应；
缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。
