1

私が知りたいのは、コンテンツがビューポートの高さまたは幅をオーバーフローしない限り、DOM 要素をビューポートの高さと幅の 100% にする方法はありますか?

私はこのコーヒースクリプトを試しましたが、いくつかの厄介な再帰が発生しました

resizeHandled = false;
$(window).resize ->
    if(resizeHandled)
        resizeHandled = false;
        return;
    docHeight = $(document).height();
    vpHeight = $(window).height();
    if(docHeight > vpHeight)
        tallestHeight = docHeight;
    else
        tallestHeight = vpHeight;

    $("[data-fullscreen]").height(tallestHeight);
    resizeHandled = true;

私はそのようなことが必要なので、デバイスを回転させ、その上にある別の div のコンテンツがビューポートをオーバーフローしても、フルスクリーンの Google マップが途切れることはありません。

http://i.imgur.com/16ohHhV.png これは私が今直面している問題です。Google マップのように、その上にオーバーレイされた div と高さを一致させます。マップとオーバーレイは、ここで説明している方法で動作します。

4

2 に答える 2

0

私はcoffeescriptに慣れていませんが、プレーンなjavascriptを使用すると、次のようなことができます

var resizeHandled = false;

window.onresize = function(){

  // you may want to use document.getElementsByClassName here
  var div = document.getElementsByTagName('div')[0]; 

  if(resizeHandled || (div.clientHeight < document.documentElement.clientHeight)){
    div.style.height = document.documentElement.clientHeight + 'px';
    resizeHandled = true;
  }          
};  

window.onresize();

デモ

于 2013-02-09T22:38:45.517 に答える
0

マップの上の div のテキストまたは画像コンテンツが実際の div コンテナーからはみ出し、Google マップを覆っている場合は、その div 要素の CSS を次のように変更してみてください。

overflow-y: hidden;

また

overflow-y: scroll;
于 2013-02-09T22:38:54.440 に答える