jquery $ (window) .height () está retornando a altura do documento

104

Tenho certeza de que estou cometendo um erro simples, mas estou simplesmente alertando $(window).height()e ele retorna o mesmo valor que $(document).height().

Tenho um MBA de 13 "e a altura da janela dos meus navegadores quando maximizada entre 780px - 820px (aproximadamente), mas cada vez que retorna uma altura de janela idêntica à altura do documento. Em todos os casos no site em que estou trabalhando, é mais de 1000px.

O que está acontecendo aqui?

alert($(window).height());
alert($(document).height());
jquery Fraser
fonte
em qual navegador você está trabalhando?
Kanishka Panamaldeniya
Este problema começou a aparecer com jquery-1.8.0, versões mais antigas de jquery fizeram isso corretamente (mesmo sem o conjunto DOCTYPE)
ralhei

Respostas:

245

Sem doctypetag, o Chrome reporta o mesmo valor para ambas as chamadas.

Adicionar um doctype estrito como <!DOCTYPE html>faz com que os valores funcionem conforme anunciado.

A doctypetag deve ser o muito primeira coisa no seu documento. Por exemplo, você não pode ter nenhum texto antes dele, mesmo que não renderize nada.

Tom Hubbard
fonte
11
O FireFox também faz esse relatório, a menos que você use um doctype estrito como <! DOCTYPE HTML>
Tom Chiverton
além disso, o doctype incorreto faz com que o bootstrap do Twitter se mova de forma estranha pela mesma razão que $ (window) .height () retorna a altura do documento.
nidheeshdas
3
No meu caso, eu tinha um Response.Writeno meu código atrás em um site ASP que estava gerando um 1antes de qualquer HTML. Então, meu tipo de documento estava certo, mas não era a primeira coisa na página, tecnicamente.
James
1
Eu tenho o mesmo problema, mas doctype foi declarado corretamente :(
bia.migueis
1
" A tag doctype deve ser a primeira coisa em seu documento. Por exemplo, você não pode ter nenhum código php antes dela, mesmo que não renderize nada. " Como pode ser isso? O navegador não sabe o que o servidor está executando, apenas recebe um arquivo de texto com marcação HTML. E se você estiver executando o IIS e não o Apache? O navegador não se importa com o que o servidor está fazendo.
Sablefoste
24

Eu tive o mesmo problema, e usando isso resolveu.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
fonte
1
tão estranho, estou usando doctype adequado também. sua altura interna corrigiu meu problema! Obrigado
Martijn van Hoof
1
O mesmo problema - tinha doctype válido e tudo. Um pouco mais de plataforma cruzada: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson,
realmente corrigindo o problema (e sim, eu tenho um doctype - a primeira coisa em cada página)
hillcode
1

Acho que seu documento deve ter espaço suficiente na janela para exibir seu conteúdo. Isso significa que não há necessidade de rolar para baixo para ver mais nenhuma parte do documento. Nesse caso, a altura do documento seria igual à altura da janela.

Xmindz
fonte
O documento se estende abaixo da parte inferior da janela em todas as páginas.
Fraser
0

Aqui está uma pergunta e resposta para isso: Diferença entre screen.availHeight e window.height ()

Tem fotos também, então você pode realmente ver as diferenças. Espero que isto ajude.

Basicamente, $(window).height()fornece a altura máxima dentro da janela do navegador (viewport) e $(document).height()fornece a altura do documento dentro do navegador. Na maioria das vezes, eles serão exatamente os mesmos, mesmo com barras de rolagem.

Solomon Closson
fonte
0

Realmente está funcionando se usarmos Doctype em nossa página web. Jquery (janela) irá retornar a altura da janela de visualização, senão irá retornar a altura completa do documento.

Defina a seguinte tag no topo de sua página da web: <!DOCTYPE html>

Gourav Yadav
fonte
use esta tag no topo de sua página da web: <! DOCTYPE html>
Gourav Yadav