使网页中的元素全屏 [英] make an element full screen in the web page

问题描述

任何想法在页面中制作一个元素全屏？

例如，一个div或一个img？

对于全屏，我的意思是它应该占用用户屏幕的所有空间，就像我们用全屏模型观看视频时一样。

有什么想法？ p> div.fullscreen {
display：block;

/ *在屏幕左上角设置div * /
position：absolute;
top：0;
剩下：0;

/ *将宽度和高度设置为屏幕的100％* /
width：100％;
身高：100％;
background-color：red
}


我试过上面的代码，但它并不是我想要的，它会占用浏览器内容区域的所有空间，而不是用户的计算机屏幕。 解决方案

HTML元素不能跳出浏览器文档窗口的界限。菜单和工具栏位于文档窗口之外（这是浏览器窗口的子窗口），因此您无法触及它们。

我认为唯一的解决办法是用JavaScript触发全屏模式。

这个答案显示了你可以如何做到这一点：如何使用JavaScript全屏显示窗口（遍布屏幕）

Any idea to make an element in the page full screen?

For example,a div or an img?

With "full screen" I mean that it should take all the space of user's screen,just like when we watch a video with the full screen model. I do not want the task bar/menu bar of the browser window display.

Any idea?

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

I have tried the above code,however it is not what I want,it juse take all the space of the browser's content area rather than the user's computer'screen.

解决方案

HTML elements can't break out of the bounds of the browser document window. The menu and tool bar are outside of the document window (which is a child of the browser window), so you can't "reach" them.

I think the only solution is to trigger full screen mode with JavaScript.

This answer shows how you can do that: How to make the window full screen with Javascript (stretching all over the screen)

这篇关于使网页中的元素全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！