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

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

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

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

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

基础用法：让元素全屏

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

    

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

        

                        
Tags：box shadow
                    
                

                        

                

                    
                    
                    
                    
                
            
            
                    
            


    

        
上一篇：            基于Web的课堂噪音监测仪
                    
        
下一篇：            趣味抽奖程序
                    
        

    




    
猜你喜欢
        

                
2025-03-05 金山图书馆网红“阅读神器”好腻害，还不快来体验 →
                
2025-03-05 教大家使用HTML代码实现年龄和星座计算
                
2025-03-05 基于HTML+CSS响应式页面，支持不同屏幕尺寸，绝对开发高效。
                
2025-03-05 强大而好用的选择器:focus-within
                
2025-03-05 做一个Deepseek爆梗对话生成器(附代码)
                
2025-03-05 测试谷歌VS Code AI 编程插件 Gemini Code Assist
                
2025-03-05 DeepSeek用137秒生成课堂互动游戏，手把手教你怎么操作
                
2025-03-05 前端 掌握这个 API，让你的网页展示效果提升 10 倍
                
2025-03-05 JavaScript的console，不只有log
                
2025-03-05 DeepSeek代码之旅1:卫星地图标记方法之——html语言的实现