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

2023-12-01 0 183

这里记录一下如何使得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页面缩小显示滚动条内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 HTML/Xhtml HTML页面缩小后显示滚动条的示例代码 https://www.u-9.cn/sheji/html/9554.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务