这是我遇到的问题：-
我有一个设置为最大宽度为 960 像素的 div。
div里面的div的宽度设置为100%，但是100%意味着最大为960px
如何在不将子 div(100%) 移出父 div(960px) 的情况下使 960px div 内的 div 成为用户屏幕的 100%？
编辑进一步澄清。这是结构：-
gParentDiv
parentDiv
myDiv
我希望 myDiv 与 gParentDiv 的宽度相同，但将其保留在 parentDiv 内
我希望你能帮忙
您可以使用视口的高度和宽度。
例如，下面的类将使元素成为视口的大小。
.fullscreen {
width: 100vw;
height: 100vh;
}
这是一个纯 CSS3解决方案，但它有一些浏览器支持问题。
如果您只想在整个屏幕上拉伸一个元素，您可以使用不同的方法。
.fullscreen {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
如果您希望 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 { ... }allborder和只是为了使 div 可见。backgroundpadding
注意 2：y 位置仍然是相对于父级的。对于 y 轴重置，请使用top:0; bottom:0;.
如何使用absolute位置
.child-div {
position:absolute;
left:0;
right:0;
}