如何制作全屏CSS [英] how to make Fullscreen CSS
本文介绍了如何制作全屏CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
i有链接和div我希望当我点击链接时我想显示我的div全屏我想要宽度和高度100％
这是我的代码，我需要帮助
i have link and div i want when i click in link i want display my div full screen and i want to make width and height 100%
this is my code please i need help
<html>
<head>
<title>DIV with full screen height</title>
<style>
#map-canvas
{
height: 590px;
width:1100px;
border: 2px solid #326195;
margin: 5px;
background-color: blue;
}
</style>
<script>
//foction plein ecran
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>
</style>
</head>
<body>
<a href="#" id="fullscreenbtn" style="z-index: 10;" >plein ecran</a>
<div id="map-canvas">
</div>
</body>
</html>
推荐答案
首先，这个想法全屏是错误的。 Javascript DOM对象不知道它是否是全屏模式，并且不需要知道。您需要开发适用于浏览器窗口内部大小的布局。我希望这是你真正想要实现的目标。
其次，你的问题不是关于CSS，而是CSS + JavaScript。
首先你需要了解的是：填写整个窗口的宽度是与高度相同的问题完全不同？为什么？由于HTML呈现的浮动特性：内容首先从左到右或从右到左流动，然后只有当宽度被填充时，内容才会下降。因此，通常情况下，CSS足以将布局调整为窗口宽度：您使用宽度：100％等属性。你不能对高度做同样的事情：即使CSS具有适合高度的表现能力，它也可能与水平布局属性相矛盾。你能看出这一点吗？
因此，我不建议大多数页面的宽度和高度都适合。与此同时，我可以看到许多情况，这样做会很好甚至是必需的。我自己做这些事情并认为它可以构成浏览器内JavaScript编程的整个布局范例。这种布局很重要的一个明显例子是游戏，但不仅仅是。
所以，这是JavaScript方法的想法：你需要通过计算调整你的布局基于两个属性：
window.innerHeight和window.innerWidth。它可能比你想象的要复杂一点，因为很难计算HTML元素的实际大小。
无论如何，您可以在我的文章中找到这种布局的综合示例：
JavaScript计算器 ，
画布上的俄罗斯方块 。
要了解它是如何工作的（我希望你已经有了这个想法），你必须阅读我的HTML + CSS并且只有< b> JavaScript的一小部分，其中使用了上述属性。我最好尽量隔离脚本的不同部分并与其他代码分开实现布局，所以学习它会很容易。
-SA
First, the idea of "full screen" is wrong. Javascript DOM objects don't "know" is it a full-screen mode or not, and don't need to "know". You need to develop the layout which works well on whatever the inner size of the browser's window is. I hope this is what you really meant to achieve.
Secondly, your question is not really about CSS, but CSS + JavaScript.
First thing you need to understand is: to fill in the full window width is the problem totally different from doing the same for height? Why? Because of the floating nature of HTML rendering: the content is flowing left-to-right or right-to-left first, and only then, when the width is filled, it goes down. So, normally, CSS is more than enough to adjust the layout to the width of the window: you use such properties aswidth: 100%. You cannot do the same with height: even if CSS had the expressive capabilities to fit in the height, it could contradict the horizontal layout properties. Can you see the point?
So, I would not recommend to fit in both width and height for most pages. At the same time, I can see many cases when doing it would be nice or even required. I do such things myself and think that it can make the whole layout paradigm for in-browser JavaScript programming. One apparent example where such layout is important is the game, but not only.
So, here is the idea for JavaScript approach: you need to adjust your layout through calculations based on two properties:
window.innerHeightandwindow.innerWidth. It can be a bit more complicated than you would expect, because it can be hard to calculate the actual size of HTML elements.
Anyway, you can find comprehensive example of such layouts in my articles:
JavaScript Calculator,
Tetris on Canvas.
To understand how it works (I hope you already got the idea), you have to read my HTML + CSS and only small part of JavaScript where the properties mentioned above are used. I tried by best to isolate different part of the script and implement layout separately from other code, so learning it would be easy.
—SA
我已经将它添加到我的风格中并且工作了
i have add this to my style and it work's
#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%;}
这篇关于如何制作全屏CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
