如何实现HTML页面缩小且显示滚动条的功能-群英

上一篇：如何用HTML制作一个有趣的悬浮球菜单效果下一篇：HTML页面下拉滚动时导航栏渐变显现的效果怎么做

这篇文章主要讲解了“如何实现HTML页面缩小且显示滚动条的功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现HTML页面缩小且显示滚动条的功能”吧！

这里记录一下如何使得HTML页面缩小之后，底部出现滚动条，使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方。

说一下这样做的好处。

首先，一般界面缩小之后不出现滚动条，用户就不能访问被隐藏的地方，必须使得界面变大才可以。

其次，有些界面由于相对或者绝对的布局，随着界面的变小，会出现右边的界面变到下面的现象，很可能会使得界面排布变得不美观，最省心的方法便是缩小后显示滚动条。

实现很简单，几行代码

body{
    min-width: 1200px;
    overflow: scroll;
    /*max-width:100%;*/
}

知识点扩展：

html页面缩小后自动出现滚动条

导入这个style就行了，主要按需求设置一下body里面的属性。

<style>

body{
  margin:0px;
  width:100%;
  min-width:1500px;
  max-width:100%;
  height:100%;
  background-color:#F0F0F0;
}
#head{
  background-color:#FFFF00;
  width:100%;
  height:100px;
}
#center{
  background-color:#00FFFF;
  width:100%;
  min-height:100%;
}
#foot{
  background-color:#FF00FF;
  width:100%;
  height:100px;
}
</style>

到此这篇关于“如何实现HTML页面缩小且显示滚动条的功能”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！