Make a div fullscreen but with browser controls

Question

I have a div within my html5 app. I turn this div fullscreen using fullScreenAPI

But what I want is the div to take full space only within the tab's content, so that all other browser controls are still available to the user. Is it possible?

Just resize the `div` and its child elements. Post your code please. — Chaska, Jun 14 '19 at 06:26
`position:fixed` & all four coordinates (top, left, …) set to 0 …? — 04FS, Jun 14 '19 at 06:33

score 0 · Answer 1 · answered Jun 14 '19 at 06:40

Do you mean like so? This works in Chrome, Firefox, IE and Safari.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #fs {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #fs {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="fs">content that fills the page</div>
</body>

If you have other content on the page that you want to hide, you can add z-index:

#fs { 
    z-index: 100 
}

Source: How to make a <div> always full screen?

Make a div fullscreen but with browser controls

1 Answers1