jquery - ウィンドウの高さを取得する (スクロールなし)

Question

ほとんどphpプロトタイプとjqueryで書かれたページにGoogleマップがあります。

マップをレスポンシブにしたいのですが、幅を正しく設定することができました。しかし、ハイトの問題を処理できませんでした。

分かりますか

jQuery(window).height();

良いページの高さを返しますが、私が望んでいたものではありません。画像でわかるように、右側にスクロールバーがあり、ページ全体の高さがわかります。画面の高さ (スクロールなし、ビューポートなし) の値を取得したいのですが、どうすればよいですか?

ここに画像の説明を入力

編集：var x = jQuery(window).height();

    alert(x);

961を返すので、欲しいの値は800のようなものだと思います

score 1 · Accepted Answer

これらのフィドルをチェックしてください。http://jsfiddle.net/corinne/pKUzU/

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle
}

それが役に立てば幸い。

score 0 · Accepted Answer

使ってみて

var weight = window.innerHeight;

現在のビューポートの高さを示します。

score 0 · Accepted Answer

取得したいのはビューポートの高さ (ページ内のビュー) で、これが $(window).height() が返すものです。コンテナの高さを取得しますか? （ただそれを得る）

問題を確認する必要があります。リンクを使用するか、JSFiddle を作成してください。

score 0 · Accepted Answer

私が思いついた解決策は、マップをラップする css クラスを定義することです。

.gm_responsive {
position: relative;
padding-bottom: 68%;
padding-top: 45px;
height: 0;
overflow: hidden;

キーは

padding-bottom: 68%;

score 0 · Accepted Answer

Javascript を使用して、スクロールバーのサイズを除くビューポートのサイズを取得します。

document.documentElement.clientHeight; // answer that OP wants, get height viewport without scrollbar
document.documentElement.clientWidth;

score 0 · Accepted Answer

使ってみて

var dimensions = document.viewport.getDimensions();
height = dimensions.height;

これは、jQuery ではなくコア PrototypeJS の一部です

6 に答える 6