Question

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

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

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

如何忽略浏览器工具栏等等。

多数民众赞成<div>我试图保持页面的完整大小。

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

Answer 1

使用一些javascript

<script>
var container;
var scene, camera, renderer, mouse, raycaster;
var grid_items = [];

init();
grid();
render();

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    scene = new THREE.Scene();
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 500, 800, 1300 );
    camera.lookAt( new THREE.Vector3() );

    // Lights
    var ambientLight = new THREE.AmbientLight( 0x606060 );
    scene.add( ambientLight );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.x = Math.random() - 0.5;
    directionalLight.position.y = Math.random() - 0.5;
    directionalLight.position.z = Math.random() - 0.5;
    directionalLight.position.normalize();
    scene.add( directionalLight );

    var directionalLight = new THREE.DirectionalLight( 0x808080 );
    directionalLight.position.x = Math.random() - 0.5;
    directionalLight.position.y = Math.random() - 0.5;
    directionalLight.position.z = Math.random() - 0.5;
    directionalLight.position.normalize();
    scene.add( directionalLight );

    renderer = new THREE.CanvasRenderer();
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild(renderer.domElement);

    window.addEventListener('mousemove', onDocumentMouseMove, false );
}

function grid(){
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    grid_items.push(cube);
}

function onDocumentMouseMove(event) {

    mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = - (event.clientY / renderer.domElement.height) * 2 + 1;

    console.log(mouse.x+"-"+mouse.y);

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(grid_items);
    if (intersects.length > 0) {
        for (var i = 0; i < intersects.length; i++) {
            console.log("OBJECT "+intersects[i])
            intersects[i].object.material.color.set(0xff0000);
        }
    }
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);

    render();
}

function render() {
    renderer.render( scene, camera );
}

Answer 2

我猜你要包括谷歌地图等内容。这实际上将<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>boxing</title>  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/ems.css">   </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Let's do Boxing here...</h4> </div> <div class="panel-body"> <div id="timerDiv"></div> <br> <img class="ring img-responsive" src="img/ring.jpg" alt=""> <img class="hand img-responsive" src="img/boxing.png" alt=""> <div class="center"> <img style="margin-top:50px;" class="box img-responsive" src="img/app.PNG"> <img style="margin-top:150px;" class="box img-responsive" src="img/app.PNG"> <img style="margin-top:250px;" class="box img-responsive" src="img/app.PNG"> </div> <center> <button id="mybutton" class="btn btn-success btn-lg">Start</button>             <button id="stop" class="btn btn-danger btn-lg">Stop</button> </center> </div> </div> </div> </div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.hotkeys.js"></script> <script src="js/boxing.js"></script> </body> </html>嵌入到具有设置宽度和高度属性的文档中，这些属性在加载后不会自动调整大小。

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

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

Answer 3

请参阅演示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树之外，可以说，并且相对于窗口的大小/位置。

如何让DIV忽略浏览器更改

3 个答案: