怎么让一个页面高度占整个屏幕的

低丶调 2014-11-19 11:29:44
比方说,我现在做一个登录的界面,我想根据用户不同大小的屏幕,
让整个页面的高度都满屏,
我设置height:100%,无效啊,宽度还是可以,谢谢

据说可以用js先获取当前用户的分辨率,然后设置
我不会,然后这个方法我觉得不好用,
有其他的办法吗?要是做前端不会js怎么弄呢?
...全文
10799 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
苝九 2021-07-30
  • 打赏
  • 举报
回复

height:100vh

qq_35544139 2017-07-14
  • 打赏
  • 举报
回复
<div class="row"> <div class="col-xs-12" style="height: 70rem;background: darkgoldenrod;"> </div> </div> 使用的是bootstrop网格布局
机智的杰瑞 2017-06-05
  • 打赏
  • 举报
回复
直接这样 html,body{width:100%;height:100%}; 这样子body就充满整个webview了
qq_38246507 2017-04-09
  • 打赏
  • 举报
回复
怎么没用 body有背景色的话 body不占一个屏幕高 会有两种颜色的
林43 2016-10-10
  • 打赏
  • 举报
回复
引用 5 楼 dcxy0 的回复:
其实没必要,你只要放好你的元素就可以,就像登录页面,元素很少,基本height:auto就可以,当然也可以先获取用户分辨率来设置宽和高,只是比较麻烦
这个真解
JPF1024 2014-11-19
  • 打赏
  • 举报
回复
其实没必要,你只要放好你的元素就可以,就像登录页面,元素很少,基本height:auto就可以,当然也可以先获取用户分辨率来设置宽和高,只是比较麻烦
低丶调 2014-11-19
  • 打赏
  • 举报
回复
引用 3 楼 KK3K2005 的回复:
html{ height:100% } 加进去
加了还是不行
KK3K2005 2014-11-19
  • 打赏
  • 举报
回复
html{ height:100% } 加进去
低丶调 2014-11-19
  • 打赏
  • 举报
回复
引用 1 楼 KK3K2005 的回复:
首先定义 html{ height:100% } ie早期版本可能不支持
<style> #left { width:300px; height:100%; margin:auto; border:1px solid red; background-color:yellow; } </style> </head> <body> <div id="left" > <div> <div id="right"> </div> </body> </html> 这里我想让id=left的div的高度的屏幕的宽度,该怎么做
KK3K2005 2014-11-19
  • 打赏
  • 举报
回复
首先定义 html{ height:100% } ie早期版本可能不支持
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧