Screen size browser window without scroll

Asked

Viewed 644 times

0

I would like to know how it is possible to make a page that does not have scroll and that adapts to the exact screen size.

how can I do this ?

  • body {
width: 100%;
height: 100%;
}

  • even having more content will not cause there to be scroll?

1 answer

1


To take out the scroll hide what is outside with overflow: hidden in CSS, as below:

html,
body {
    overflow: hidden;
    width: 100%
    height: 100%;
}

And if you refer to the screen resolution size then just ask the full screen for an element to the browser through the function used in the code below (Element > Ask for full screen). Works with every element except the natives like "body", etc. Works only with click events and others.

Example:

var btn = document.getElementById("full_screen");

btn.onclick = function() {

        // Seu container para tela cheia
        var page = document.getElementById('page');

        /*
         * É necessário de condições para saber se tem suporte para tela cheia.
         * Não use os operadores ||.
         */
        if(page.requestFullscreen) {
            page.requestFullscreen();
        }else if(page.msRequestFullscreen) {
            /* IE, Edge */
            page.msRequestFullscreen();
        }else if(page.mozRequestFullScreen) {
            /* Firefox */
            page.mozRequestFullScreen();
        }else if(page.webkitRequestFullscreen) {
            /* Chrome, Opera, Safari, etc */
            page.webkitRequestFullscreen();
        }else{
            alert("Sem suporte para tela cheia.");
        }

}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.