06-01 06:43 阅读 373

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

这篇文章主要介绍了HTML页面缩小后显示滚动条的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

说一下这样做的好处。

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

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

实现很简单，几行代码

1

2

3

4

5

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页面缩小后显示滚动条的示例代码的文章就介绍到这了

推荐资源