<div id="wrap">
<!-- section -->
<div class="section">
<div class="center">
<button id="go">Фулскрин</button>
</div>
</div>
<!--/section -->
</div>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fff;
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.section {
padding: 40px;
}
#line {
font-size: 24px;
margin-bottom: 20px;
}
#go {
padding: 20px;
cursor: pointer;
}
View Compiled
var goBtn = document.getElementById('go');
goBtn.onclick = function () {
document.documentElement.requestFullscreen();
}
goBtn.onclick = function () {
launchFullScreen(document.documentElement);
}
function launchFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
This Pen doesn't use any external CSS resources.