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

Answer 1

If you want the div to become '100% of the user's screen' (viewport), then the answers of @Itay and @Fujy are both correct.

If you want the same position as the grandparent (960px), then first define a reset to the dimensions of the grandgrandparent (body). Then position the child the same way as the grandparent. Consider this code:

Notice the is the same width as the viewport and the grandparent will be positioned relative to this body/viewport. The child needs to be positioned in the same way as the grandparent. So first reset to the viewport: #reset ( position:absolute; left:0; right:0; }. Now it's easy to give the child the same declarations as the grandparent.

The body/viewport/grandgrandparent is white, grandparent gray, parent blue, reset red and child green:

    
    


    

        
Grandparent
        

            
The parent can be anywhere.
            

                

                    
Child has same position as grandparent.
                
            
        
    

Note 1: #parent { ... } and all border, background and padding are only to make the div's visible.

Note 2: The y-position is still relative to the parent. For y-axis reset use top:0; bottom:0;.