• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML页面缩小后显示滚动条的示例代码

    这里记录一下如何使得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列表框、文本域、文件域的示例代码
    下一篇:sublime / vscode 快捷生成HTML代码的实现
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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