• o Hey, 我是 沉浸式趣谈
• o 本文首发于 【沉浸式趣谈】，我的个人博客 https://yaolifeng.com 也同步更新。
• o 转载请在文章开头注明出处和版权信息。
• o 如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！

如何原生实现让任意 div 全屏展示

最近在做一个项目，需要实现点击按钮让某个 div 全屏展示的功能。

第一反应是用 CSS 设置 position: fixed 加上宽高 100%，但这样并不是真正的全屏，因为浏览器的工具栏还在。

后来发现浏览器原生就提供了 Fullscreen API，可以让任意元素真正全屏展示，今天就来聊聊这个有趣的 API。

基础用法：让元素全屏

先来看最简单的使用方式。假设我们有一个文章阅读器，想让用户能够专注阅读：

    

        
一篇很棒的文章
        
这是文章的正文内容...
    
    

        

                        
Tags：imageviewer
                    
                

                        

                

                    
                    
                    
                    
                
            
            
                    
            


    

        
上一篇：            电脑看图软件哪个好?简鹿办公推荐这五款必备看图工具
                    
        
下一篇：            2024年度全球准点起飞率最佳机场榜单
                    
        

    




    
猜你喜欢
        

                
2025-03-11 电脑看图软件哪个好?简鹿办公推荐这五款必备看图工具
                
2024-08-16 穿越时间·网页里的操作系统-daedalOS体验实录，动力不详功能不少
                
2024-08-16 活久见!Linux命令行居然也可以用来查看图像?
                
2024-08-16 截图录屏-FSCapture10.4强大的截圖和錄屏功能附下載注冊
                
2024-08-16 细胞图像数据的主动学习（细胞图绘制）
                
2024-08-16 Fsimage和Edits解析（简述fsimage 和 edit 的区别）
                
2024-08-16 30款神仙软件，Windows平台必备神器!
                
2024-08-16 免费的体积小巧(非商业用途)且功能强大的图片浏览器
                
2024-08-16 Win10系统如何实现动图显示（win10设置动图为桌面）
                
2024-08-16 GNOME 46已发布 下月将整合到Ubuntu 24.04 LTS和Fedora 40