• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

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

    发布者: 浪子 | 发布时间: 2025-8-16 20:54| 查看数: 20| 评论数: 0|帖子模式

    这里记录一下如何使得HTML页面缩小之后,底部出现滚动条,使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方。
    说一下这样做的好处。
    首先,一般界面缩小之后不出现滚动条,用户就不能访问被隐藏的地方,必须使得界面变大才可以。
    其次,有些界面由于相对或者绝对的布局,随着界面的变小,会出现右边的界面变到下面的现象,很可能会使得界面排布变得不美观,最省心的方法便是缩小后显示滚动条。
    实现很简单,几行代码
    1. body{
    2.     min-width: 1200px;
    3.     overflow: scroll;
    4.     /*max-width:100%;*/
    5. }
    复制代码
    知识点扩展:
    html页面缩小后自动出现滚动条
    导入这个style就行了,主要按需求设置一下body里面的属性。
    1. <style>

    2. body{
    3.   margin:0px;
    4.   width:100%;
    5.   min-width:1500px;
    6.   max-width:100%;
    7.   height:100%;
    8.   background-color:#F0F0F0;
    9. }
    10. #head{
    11.   background-color:#FFFF00;
    12.   width:100%;
    13.   height:100px;
    14. }
    15. #center{
    16.   background-color:#00FFFF;
    17.   width:100%;
    18.   min-height:100%;
    19. }
    20. #foot{
    21.   background-color:#FF00FF;
    22.   width:100%;
    23.   height:100px;
    24. }
    25. </style>
    复制代码
    到此这篇关于HTML页面缩小后显示滚动条的示例代码的文章就介绍到这了,更多相关html页面缩小显示滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    浏览过的版块

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表