JavaScript – Obtenha a altura do navegador

Eu estou procurando um trecho de código para obter a altura da área visível dentro de uma janela do navegador.

Eu tinha esse código, no entanto, é um pouco grampeado como se o corpo não exceda a altura da janela, então ele volta curto.

document.body.clientHeight; 

Eu tentei algumas outras coisas, mas elas retornam NaN ou a mesma altura que a acima.

Alguém sabe como obter a altura real da janela de navegação?

Você vai querer algo assim, tirado de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

 function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } window.alert( 'Width = ' + myWidth ); window.alert( 'Height = ' + myHeight ); } 

Então isso é innerHeight para navegadores modernos, documentElement.clientHeight para o IE, body.clientHeight para obsoletos / quirks.

Tente usar jquery:

 window_size = $(window).height(); 

Você pode usar o window.innerHeight

A maneira que eu gosto de fazer é assim com uma tarefa ternária.

  var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth; var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight; 

Eu poderia salientar que, se você executar isso no contexto global, a partir desse ponto você poderia usar window.height e window.width.

Funciona no IE e outros navegadores, tanto quanto eu sei (eu só testei no IE11).

Super limpo e, se não me engano, eficiente.

Há uma maneira mais simples do que um monte de declarações if. Use o operador ou (||).

 function getBrowserDimensions() { return { width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) }; } var browser_dims = getBrowserDimensions(); alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height); 

Isso deve funcionar também. Primeiro crie um elemento absoluto

com posição absoluta e 100% de altura:

 

Então, obtenha a altura da janela desse elemento via offsetHeight

 var winHeight = document.getElementById('h').offsetHeight; 

Atualizar:

 function getBrowserSize() { var div = document.createElement('div'); div.style.position = 'absolute'; div.style.top = 0; div.style.left = 0; div.style.width = '100%'; div.style.height = '100%'; document.documentElement.appendChild(div); var results = { width: div.offsetWidth, height: div.offsetHeight }; div.parentNode.removeChild(div); // remove the `div` return results; } console.log(getBrowserSize()); 

Eu prefiro o jeito que eu acabei de descobrir … Não JS … 100% HTML & CSS:

(Centralizará perfeitamente no meio, independentemente do tamanho do conteúdo.

ARQUIVO HTML

     
123

ARQUIVO CSS

 #container{ border:0; width:100%; height:100%; } #centerpiece{ vertical-align:middle; text-align:center; } 

para imagens de centralização / div guardadas no td, você pode tentar a margem: auto; e especifique uma dimensão div. -Embora, dizendo que … a propriedade ‘text-align’ irá alinhar muito mais do que apenas um simples elemento de texto.

Versão JavaScript no caso de o jQuery não ser uma opção.

window.screen.availHeight

 var winWidth = window.screen.width; var winHeight = window.screen.height; document.write(winWidth, winHeight); 

Com o JQuery, você pode tentar este $(window).innerHeight() (funciona para mim no Chrome, FF e IE). Com bootstrap modal eu usei algo como o seguinte;

 $('#YourModal').on('show.bs.modal', function () { $('.modal-body').css('height', $(window).innerHeight() * 0.7); }); 
    Intereting Posts