HTML页面缩小后显示滚动条的示例代码

时间：2023-12-30 08:42:31 来源：[db:出处] 作者：[db:作者] 阅读：

这里记录一下如何使得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页面缩小后显示滚动条的示例代码的文章就介绍到这了,更多相关html页面缩小显示滚动条内容请搜索阿里站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持阿里站！

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载

来顶一下

返回首页