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

http://i.imgur.com/16ohHhV.png 这是我现在面临的问题，像谷歌地图一样，将高度与顶部的覆盖 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 回答