使Div 100％的祖父母容器？答案

【问题标题】：Make Div 100% of grandparent container?使Div 100％的祖父母容器？
【发布时间】：2017-08-11 04:16:51
【问题描述】：

这是我遇到的问题：-

我有一个设置为最大宽度为 960 像素的 div。

div内部div的宽度设置为100%，但100%表示最大为960px

如何在不将子 div(100%) 移出父 div(960px) 的情况下，使 960px div 内的 div 成为用户屏幕的 100%？

编辑以作进一步说明。这是结构：-

 gParentDiv
    parentDiv
       myDiv

我希望 myDiv 的宽度与 gParentDiv 相同，但要保持在 parentDiv 内

希望你能帮忙

【问题讨论】：

你只是想在整个屏幕上拉伸一些 div。还是特别需要在自己的容器内使其 100% 宽？
意大利，是的，我想拉伸子div，使其成为gradparent div的全宽
你想要什么？引用：“成为用户屏幕的 100%”或“与 gParentDiv 相同的宽度”。
@user2692219 查看我的更新答案
Break element out of container 的可能重复项

标签： css

【解决方案1】：

您可以使用视口的高度和宽度。

例如，下面的类将使元素成为视口的大小。

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

jsFiddle Demo

这是一个纯 CSS3 解决方案，但它有一些browser support 问题。

如果您只想在整个屏幕上拉伸一个元素，您可以使用不同的方法。

jsFiddle Demo

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

【讨论】：

没有 Javascript 有什么办法吗？
我的回答中没有JS。

【解决方案2】：

如果你想让 div 成为“100% 的用户屏幕”（视口），那么@Itay 和@Fujy 的答案都是正确的。

如果您想要与祖父母（960px）相同的位置，则首先定义重置为祖父母（身体）的尺寸。然后以与祖父母相同的方式定位孩子。考虑这段代码：

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

注意<body> 与视口的宽度相同，并且祖父母将相对于该主体/视口定位。孩子需要以与祖父母相同的方式定位。所以首先重置到视口：#reset ( position:absolute; left:0; right:0; }。现在很容易给孩子和祖父母一样的声明。

主体/视口/祖父母为白色，祖父母为灰色，父母为蓝色，重置为红色，子为绿色：

<!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>

注意 1：#parent { ... } 和所有 border、background 和 padding 仅用于使 div 可见。

注意 2：y 位置仍然是相对于父级的。对于 y 轴重置，请使用 top:0; bottom:0;。

【讨论】：

这样做的一个缺点是重置时的绝对定位会导致子内容流过后面的任何内容。所以我想当你在子元素内部和之后有不同的内容时它不起作用。
@allcaps 如果您使用的是百分比而不是像素怎么办？
可以在没有position: absolute 的情况下完成吗？就像有 4 个具有 25% 宽度的元素并排放置？

【解决方案3】：

使用absolute位置怎么样

 .child-div {
     position:absolute;
     left:0;
     right:0;
 }

【讨论】：

谢谢，所以无论屏幕大小，我的子 div 都会出现在屏幕左上角，并带有此代码？
@user2692219 这会起作用。玩弄w3schools.com/cssref/…
绝对位置有效，但绝不是最好的完成方式。它可能会导致较小的屏幕和调整大小出现问题。仅在绝对必要时使用（双关语）