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 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。
当前的项目遇到了这个问题， 当打开dialog的时候，希望主页面的滚动条不要滚动。 一番搜索之后，发现大家的解决办法分为两种。一种就是隐藏滚动条 ，但是这样的话，前台页面会因为滚动条的隐藏和出现而发生宽度的变化。 这就使得每次一打开dialog页面就会伸缩。十分难受。第二种 就是不知道从哪儿抄的这种方法。一番修改之后，我也没好用。 最后 终于在外网找到个完美解决方案。 根据需求自行修改。 *（在scrollTo方法中，最好加上behavior:'instant'）1、新建一个html文件，用dw或记事本软件新建一个html网页文件，命名为隐藏滚动条，保存在桌面。2、内隐藏滚动，在标签中写入以下代码，隐藏横向滚动条；overflow-x：hidden；在标签中写入以下代码，隐藏纵向滚动条；overflow-y：hidden；在浏览器中查看效果。
3、设置html半文本隐藏，删除body样式；在样式中插入以下代码；html{overflow-x：hidden；overflow-y：auto；}隐藏横向滚动条；在样式中插入以下代码；html{overflow-x：auto；overflow-y：hidden；}隐藏纵向滚动条。
4、设置html全文本隐藏，在样式中插入以下代码；html{overflow-x：hidden；overflow-y：hidden；}隐藏全部滚动条。
5、引用外部网页文件，在html中插入以下代码，引入一个框架，里面只外部代码；在浏览器中查看滚动条动态。
6、隐藏框架滚动条，在内部作以下修改，隐藏滚动条；。
7、高级隐藏，网页头部引入jquery主文件，并键入以下代码；$(function(){$(#iframe_id).load(function(){varheight=$(this).contents().find(#content).height()+90；//这样给以一个最小高度$(this).height(height
