首页前端开发HTMLHTML页面缩小后显示滚动条的示例代码

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

时间2024-01-27 18:01:03发布访客分类HTML浏览941
导读:收集整理的这篇文章主要介绍了HTML页面缩小后显示滚动条的示例代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 这里记录一下如何使得HTML页面缩小之后,底部出现滚动条,使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方...
收集整理的这篇文章主要介绍了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页面缩小显示滚动条内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: sublime / vscode 快捷生成HTML代...下一篇:html列表框文本域文件域的示...猜你在找的HTML/Xhtml相关文章 了解HTTP Headers的方方面面 图文说明2022-04-12Html分层的box-shadow效果的示例代码2022-04-12html+css实现血轮眼轮回眼特效代码2022-04-12html实现随机点名器的示例代码2022-04-12HTML中table表格拆分合并(colspanrowspan)2022-04-12HTML页面滚动时部分内容位置固定不滚动的实现2022-04-12HTML+css盒子模型案例(圆半圆等)“border-radius” 简单易上手2022-04-12HTML通过表单实现酒店筛选功能2022-04-12HTML中的表单Form实现居中效果2022-04-12HTML+CSS制作心跳特效的实现2022-04-12 其他相关热搜词更多phpjava

若转载请注明出处: HTML页面缩小后显示滚动条的示例代码
本文地址: https://pptw.com/jishu/588533.html
HTML 拖拉功能的实现代码 Unicode中的数学符号小结

游客 回复需填写必要信息