Question

我有一个页面，其中包含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>

Answer 1

移除html选择器前的full-screen，然后移除space选择器和div选择器之间的full-screen：

:-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%;
}

Answer 2

您应该提供给<body>和<HTML> height: 100%

<强> CSS

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

注意：你应该给予身高：100％;他的父母有全高

Answer 3

尝试这样做：

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

您还必须检查页面是否允许在标记之前理解HTML5：

<!doctype html>

Answer 4

    #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%;}

全屏API的CSS对我不起作用

4 个答案: