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

(编辑:jimmy 日期: 2024/5/19 浏览:2)

这里记录一下如何使得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>

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。