Question

我有脚本在全屏幕上放置摄像头。我创建了一个创建表的脚本：

document.getElementById('cameras_content').innerHTML +=
    ('<table height="50%" width="50%" style="float: left;">' + 
        '<tr>' +
            '<td><img id="topImage'+ m +'" width="100%" height="100%"></img></td>' +
        '</tr>' +                                                   
    '</table>');

由于全屏共享4台摄像机，因此该表为2x2 我有正确的尺寸问题。水平可以，我有两个合适的图像。问题是纵向的。我做了一个与水平相同的高度，但它不起作用。对此有什么神奇的命令吗？

以下是全屏脚本：

function fullscreen(){
var elem = document.getElementById("cameras_content");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
}

Answer 1

要在HTML页面中使用高度百分比，您需要更改页面大小的方式。（通常，身体调整自身以容纳其内容而不是填充浏览器窗口）

为此，请在<head>标记内添加以下内容：

<style type="text/css">
  html{
    height: 100%;
  }
  body {
    min-height: 100%;
  }

  /* this part is optional, but makes scrollbars etc easier to handle */
  body, html{
     padding:0;
  }
</style>

完成此操作后，您可以在元素上使用百分比高度。

适合页面。高度问题

1 个答案: