HTML和CSS中的全屏代码

I have a question of how to make the content in a full screen, there are codes of my content:

我有一个关于如何在全屏幕中制作内容的问题,我的内容有以下代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">              
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>main</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    html, body { height:100%; background-color: #000000;}
    body { margin:0; padding:0; overflow:hidden; }
    #flashContent { width:100%; height:100%; }
    </style>
</head>
<body>
    <div id="flashContent">

        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="600" id="main" align="middle">
            <param name="movie" value="main.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="window" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="main.swf" width="800" height="600">
                <param name="movie" value="main.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
            <!--<![endif]-->
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </div>
</body>

The current content in webpage is located in left corner and it is not a full size, I know how to make it centered but I have no idea how to make it as a full screen display, please advise, thank you.

网页中的当前内容位于左下角并且不是完整尺寸,我知道如何使其居中但我不知道如何将其作为全屏显示,请指教,谢谢。

3 个解决方案

#1

You are specifying width and height to object itself. Remove width and height properties, or change it to percentage.

您指定对象本身的宽度和高度。删除宽度和高度属性,或将其更改为百分比。

<object style="width: 100%; height: 100%;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="main">

#2

Take a look to the fullscreen API of (HTML5) that could be useful to you. http://slides.html5rocks.com/#fullscreen-api

查看可能对您有用的(HTML5)全屏API。 http://slides.html5rocks.com/#fullscreen-api

#3

Instead of

#flashContent { width:100%; height:100%; }

Try this:

#flashContent object{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#1