HTML页面缩小后显示滚动条的示例代码
2021-03-15 04:01
1001 查看
这里记录一下如何使得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页面缩小显示滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- html table呈现个人简历以及单元格宽度失效的问题解决
- h5页面背景图很长要有滚动条滑动效果的实现
- 使用HTML和CSS实现的标签云效果(附demo)
- HTML元素拖拽功能实现的完整实例
- HTML基本标签及结构详解
- 在HTML里加载摄像头的方法
- HTML用户注册页面设置源码
- html 指定页面字符集的两种方法
- HTML+CSS+JavaScript实现图片3D展览的示例代码
- CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
- HTML+CSS3+JS 实现的下拉菜单
- 浅谈vue在html中出现{{}}的原因及解决方式
- html中创建并调用vue组件的几种方法汇总
- HTML中图片不存在显示默认图片的方法示例
- html直接引用vue和element-ui的方法
- 详解html-webpack-plugin使用
- 详解HTML5中CSS外观属性
- HTML+CSS+JS实现堆叠轮播效果的示例代码
- 详解HTML设置边框的三种方式