HTML: how to set children element width = browser window width?

Question

I want to display a child of my html page all over the browser window .. in other words, I would like to enlarge it and keep it the same size in the browser window when it changes after loading.

I was wondering if I need to move this object outside of the parent elements, or I can set these properties using css.

At the moment, if I set the width: 100% and the height: 100%, it fits the parent (of course), not the window.

thanks

Answer 1

It is usually best to use relative positioning when possible, and any large children should be equal to the parent. But you can always position it completely:

position:absolute; width:100%; height:100%; left:0px; top: 0px; 

Answer 2

the width is simple:

 width: 100%; 

for height, you need something like this:

100% height layout using CSS

Answer 3

The width always depends on the parent element. You can use absolute positioning so that this particular element “leaves” it as a parent (relative to positioning and flow, that is), and set it to 100%. Be careful, although this may not end where you want it to be visual.

 .someElement { position: absolute; width: 100%; height: 400px; } 

A parent cannot have a "position: relative" specified for this to work.