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

Question

hi,

I want to display a children element of my html page all over the browser window.. in other words I would like to enlarge it and keep it the same size the browser window also when it is resized after loading.

I was wondering if I have to move this object outside the parent elements or I can set these properties with css.

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

thanks

Answer 1

width is easy:

width: 100%;

for height, you need something like this:

100% Height Layout Using CSS

Answer 2

Width always aplies regarding to the parent element. You could use absolute positioning to have that particular element "out" of it's parent (regarding positioning and flow, that is), and set it to 100%. Be carefull though, it might no end up where you want it to be visually.

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

The parent element cannot have "position:relative" specified for this to work.

Answer 3

It is typically better to use relative positioning when possible, and any large child elements should be equal to the parent. But you can always absolutely position it:

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