Make Div 100% of grandparent container?

后端未结

关注

 3  409

执念已碎

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

相关标签:

3条回答

长情又很酷

2021-01-03 18:42
How about using absolute position
```
 .child-div {
     position:absolute;
     left:0;
     right:0;
 }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2021-01-03 18:43
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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

伪装坚强ぢ

2021-01-03 18:59

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:

<body>
    <div id="grandparent">
        <div id="parent">
            <div id="reset">
                <div id="child">
                </div>
            </div>
        </div>
    </div>
</body>

Notice the <body> 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:

Screenshot

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        * { margin: 0; padding: 0; }

        #grandparent {
            width: 960px;
            margin: 0 auto;
            background-color: lightgray;
            height: 100vh;
        }

        #parent {
            width: 320px;
            margin-left: 480px;
            height: 100px;
            border: 1px solid blue;
            background-color: rgba(0,0,255,.30);
            padding: 12px;
        }

        #reset {
            position: absolute;
            left: 0;
            right: 0;
            border: 1px solid red;
            background-color: rgba(255,0,0,.30);
            padding: 12px;
        }

        #child { 
            width: 960px; /* same as grandparent */ 
            margin: 0 auto; /* same as grandparent */ 
            border: 1px solid green;
            background-color: rgba(0,255,0,.30);
            padding: 12px 0;

        }
    </style>
</head>
<body>
    <div id="grandparent">
        <h1>Grandparent</h1>
        <div id="parent">
            <p>The parent can be anywhere.</p>
            <div id="reset">
                <div id="child">
                    <p>Child has same position as grandparent.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

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;.

0 讨论(0)