Question

我想知道，有没有办法让DOM元素更喜欢100％的视口高度和宽度，除非它的内容会溢出视口高度或宽度？

我试过这个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的内容溢出视口，全屏谷歌地图不会自行关闭。

http://i.imgur.com/16ohHhV.png 这就是我现在面临的问题，就像google地图一样，高度与顶部的重叠div匹配，如果带有地图和叠加层的容器的行为与我在这里描述的方式相同。

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

Answer 2

如果地图上方div的文字或图片内容溢出了实际的div容器并覆盖了Google地图，那么您可以尝试将该div元素上的CSS更改为：

overflow-y: hidden;

或

overflow-y: scroll;

div包装内容或全屏

2 个答案: