Question

I have a child DIV under several other DIV containers. I am trying to add a button to make it to full screen using Greasemonkey script. I tried using below CSS but it isn’t successful. It is just filling up to the parent container.

body.richText{
    position:absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    }

Is there a guaranteed way to make any selected DIV to fill the screen, irrespective of it’s parent’s CSS properties?

Answer 1

Absolute positioning will only respect it’s elder elements if it’s parent or grandparent has position relative.

If you did something like:

body, html {
    height:100%;
    width:100%;
}
body * {
    position:static !important;
}

It should guarantee that the selection fills up all of the available space. ‘body *’ can be substituted for whatever elder selectors are needed for the specific application to override the ‘position:relative;’ styles.