如何让 DIV 忽略浏览器更改答案

【问题标题】：How do I get DIV to ignore browser changes如何让 DIV 忽略浏览器更改
【发布时间】：2015-10-21 20:24:07
【问题描述】：

每当我以全屏（F11 模式）加载我的页面时，我的<div> 都会按预期占据全屏。

但是，当它不是全屏时，<div> 只会占据当前浏览器的全屏。当我按 F11 并返回全屏时，它会在页面底部留下一个大的白色边框。

当我在关闭开发工具后打开任何开发工具加载页面时也是如此，该页面在开发工具打开的位置留下一个白色空白区域。

我怎样才能忽略浏览器工具栏等等。

那是<div> 我正在尝试保持页面的完整大小。

#mapCanvas{
  height: 100%;
  width: 100%;
  z-index: 0;
  position:absolute;
}

【问题讨论】：

我怀疑您需要为此使用 JavaScript，因为我认为 CSS 不知道何时对窗口进行了更改。
那是因为 CSS 不是动态的。它会加载您加载的任何屏幕的 100%。
因为你是position: absolute，所以计算的高度和宽度是从页面加载的那一刻开始计算的，如果你改变浏览器大小，它不会重新计算

标签： html css

【解决方案1】：

查看演示http://jsfiddle.net/a7nzy6w6/1/

CSS

#myDiv.fullscreen{
z-index: 9999; 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
left: 0;

}

#myDiv{background:#cc0000; width:500px; height:400px;}

HTML

<div class="row">
  <div class="col-lg-12">
   <div id="myDiv">
       my div
      <button>Full Screen</button>
  </div>

JS：

$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen'); 
});

诀窍在于设置位置：固定，通过切换 .fullscreen 类。可以说，这将其置于普通 dom 树之外，并相对于窗口调整大小/位置。

【讨论】：

【解决方案2】：

使用一些javascript

window.onresize = function(event) {
    document.getElementById("mapCanvas").style.height = "100%";
    document.getElementById("mapCanvas").style.width = "100%";
};

【讨论】：

我打算用 jQuery 提交它，但我不知道您是否正在使用它，或者您是否必须添加新库。很高兴能提供帮助。
@Farris Ismati 他为什么要用 jquery 代替？

【解决方案3】：

我猜你正在包括谷歌地图之类的东西。这实际上将iframe 嵌入到具有设置的宽度和高度属性的文档中，一旦加载就不会自动调整大小。

您需要做的是在 JavaScript 中添加一个调整大小事件处理程序，并在窗口调整大小时重新加载画布。

可以在here 找到使用谷歌地图执行此操作的示例。

【讨论】：