Fatal编程技术网
  • javascript/
  • Javascript 用于全屏API的CSS don'；我不工作

Javascript 用于全屏API的CSS don'；我不工作

javascript html css

Javascript 用于全屏API的CSS don'；我不工作,javascript,html,css,fullscreen,Javascript,Html,Css,Fullscreen,我有一个页面，其中包含一个div，当用户单击链接时，我想让它全屏显示 我尝试过用CSS来做这个，但它不起作用 <html> <head> <title>DIV with full screen height</title> <style> #map-canvas { height: 590px; width:1

我有一个页面，其中包含一个
div
，当用户单击链接时，我想让它全屏显示

我尝试过用CSS来做这个，但它不起作用

<html>
    <head>
        <title>DIV with full screen height</title>
        <style>
            #map-canvas {
                height: 590px;
                width:1100px;
                border: 2px solid #326195;
                margin: 5px;
            }
            html:-moz-full-screen #map-canvas {
                height: 100%;
                width:100%;
            }
            html:-webkit-full-screen #map-canvas {
                height: 100%;
                width:100%;
            }
            html:-ms-fullscreen #map-canvas {
                height: 100%;
                width:100%;
            }
        </style>
        <script>
            var element, fullscreenbtn;

            function intializePlayer() {
                element = document.getElementById('map-canvas');
                fullscreenbtn = document.getElementById('fullscreenbtn');
                // Add event listeners
                fullscreenbtn.addEventListener('click', toggleFullScreen, false);
            }
            window.onload = intializePlayer;

            var fullScreen = false;

            function toggleFullScreen() {
                debugger;
                if (!element.fullscreenElement && // alternative standard method
                !element.mozFullScreenElement && !element.webkitFullscreenElement) { // current working methods
                    if (element.requestFullscreen) {
                        element.requestFullscreen();

                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();

                    } else if (element.webkitRequestFullscreen) {
                        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    if (element.cancelFullScreen) {
                        element.cancelFullScreen();
                    } else if (element.mozCancelFullScreen) {
                        delementocument.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        element.webkitCancelFullScreen();
                    }
                }
            }            
        </script>
    </head>
    <body>
        <a href="#" id="fullscreenbtn" style="z-index: 10;">plein ecran</a>
        <div id="map-canvas"></div>
    </body>
</html>


具有全屏高度的DIV
#地图画布{
高度：590px；
宽度：1100px；
边框：2个实心#326195；
保证金：5px；
}
html:-moz全屏#地图画布{
身高：100%；
宽度：100%；
}
html:-webkit全屏#地图画布{
身高：100%；
宽度：100%；
}
html:-ms全屏#地图画布{
身高：100%；
宽度：100%；
}
变量元素，全屏BTN；
函数initializepLayer（）{
element=document.getElementById（'map-canvas'）；
fullscreenbtn=document.getElementById（'fullscreenbtn'）；
//添加事件侦听器
全屏BTN.addEventListener（'click'，toggleFullScreen，false）；
}
window.onload=初始化图层；
var全屏=假；
函数切换全屏（）{
调试器；
如果（！element.fullscreenElement&&//替代标准方法
！element.mozFullScreenElement&！element.webkitFullscreenElement）{//当前工作方法
if（element.requestFullscreen）{
元素。requestFullscreen（）；
}else if（element.mozRequestFullScreen）{
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullscreen）{
element.webkitRequestFullscreen（element.ALLOW\u KEYBOARD\u INPUT）；
}
}否则{
if（元素取消全屏）{
元素。取消全屏（）；
}else if（element.mozCancelFullScreen）{
delementDocument.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
元素。webkitCancelFullScreen（）；
}
}
}
你应该给
和
高度：100%

CSS


body,html{
height: 100%;
margin:0;
padding:0;
}


注：您应始终给出高度：100%；让他父母有一个完整的身高

尝试这样做：


#map_canvas{
     position: absolute;
     top: 0;
     bottom: 0;
}


您还必须检查页面是否允许理解HTML5，然后才能使用标签：


<!doctype html>



删除
全屏
选择器前面的
html
，并删除
全屏
选择器和div选择器之间的
空格
：


:-moz-full-screen#map-canvas {
    height: 100%;
    width:100%;
}

:-webkit-full-screen#map-canvas {
   height: 100%;
   width:100%;
}

:-ms-fullscreen#map-canvas {
   height: 100%;
   width:100%;
}



你说它不起作用是什么意思？它是否做了错误的事情，或者什么也没有发生，或者有什么错误吗？虽然这篇文章可以回答这个问题，但是添加一些解释，或者可能添加一些相关文档的链接仍然是一个好主意。对当前的OP和未来的访客来说，有好的解释和参考的答案通常更有用。完整详细的答案也更有可能吸引正面的选票。

    #map-canvas:-webkit-full-screen  { width: 100%; height: 100%; }
    #map-canvas:-moz-full-screen     { width: 100% ; height: 100%;}
    #map-canvas:-ms-full-screen      { width: 100% ; height: 100%;}
    #map-canvas:-o-full-screen       { width: 100% ; height: 100%;}