javascript - div 换行内容或全屏

Question

我想知道，有没有一种方法可以让 DOM 元素更喜欢 100% 的视口(viewport)高度和宽度，除非它的内容会溢出视口(viewport)的高度或宽度？

我试过这个 coffeescript，但它以一些讨厌的递归结束

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 的内容溢出视口(viewport)，全屏谷歌地图不会自行切断。

http://i.imgur.com/16ohHhV.png这就是我现在面临的问题，id 喜欢谷歌地图以匹配高度与它上面的覆盖 div，如果同时具有 map 和覆盖的容器会按照我在这里描述的方式运行。

Answer 1

我不熟悉 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();

demo