Make Div 100% of grandparent container?

Question

Here's the problem I have:-

I have one div that is set to a max width of 960px.

The width of the div inside the div is set to 100%, but 100% means a max of 960px

How can I make the div inside the 960px div become 100% of the user's screen, without moving the child div(100%) out of the parent div(960px)?

EDIT FOR FURTHER CLARIFICATION. Here's the structure:-

 gParentDiv     parentDiv        myDiv 

I want myDiv to be the same width as gParentDiv, but keep it within parentDiv

I hope you can help

Answer 1

You can use the viewport's height and width.

For example, the following class will make the element the size of the viewport.

.fullscreen {     width: 100vw;     height: 100vh; } 

jsFiddle Demo

This is a pure CSS3 solution, but it has some browser support issues.

---

If you just want to strech an element on the entire screen you can use a different approach.

jsFiddle Demo

.fullscreen {     position: absolute;     top: 0;     left: 0;     bottom: 0;     right: 0; }