CSS 使 Div 100% 成为祖父容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18814838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Div 100% of grandparent container?
提问by BenjaminFranklin
Here's the problem I have:-
这是我遇到的问题：-
I have one div that is set to a max width of 960px.
我有一个最大宽度设置为 960px 的 div。
The width of the div inside the div is set to 100%, but 100% means a max of 960px
div里面的div宽度设置为100%，但是100%表示最大为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)?
如何使 960px div 内的 div 成为用户屏幕的 100%，而不将子 div(100%) 移出父 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
我希望 myDiv 与 gParentDiv 的宽度相同，但将其保留在 parentDiv 内
I hope you can help
我希望你能帮忙
回答by Itay
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;
}
This is a pure CSS3solution, but it has some browser supportissues.
这是一个纯 CSS3解决方案，但它有一些浏览器支持问题。
If you just want to strech an element on the entire screen you can use a different approach.
如果您只想在整个屏幕上拉伸元素，您可以使用不同的方法。
.fullscreen {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
回答by allcaps
If you want the div to become '100% of the user's screen' (viewport), then the answers of @Itay and @Fujy are both correct.
如果您希望 div 成为“用户屏幕的 100%”（视口），那么@Itay 和 @Fujy 的答案都是正确的。
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:
如果您想要与祖父母 (960px) 相同的位置，那么首先定义一个重置为祖祖父母 (body) 的尺寸。然后以与祖父母相同的方式定位孩子。考虑这个代码：
<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.
请注意，<body>它与视口的宽度相同，并且祖父项将相对于该主体/视口定位。孩子需要以与祖父母相同的方式定位。所以首先重置到视口：#reset ( position:absolute; left:0; right:0; }。现在很容易给孩子和祖父母一样的声明。
The body/viewport/grandgrandparent is white, grandparent gray, parent blue, reset red and child green:
body/viewport/grandgrandparent 是白色，grandparent 灰色，parent 蓝色，reset 红色和 child 绿色：
<!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, backgroundand paddingare only to make the div's visible.
注意 1:#parent { ... }和 all border, backgroundandpadding只是为了使 div 可见。
Note 2: The y-position is still relative to the parent. For y-axis reset use top:0; bottom:0;.
注 2：y 位置仍然相对于父级。对于 y 轴重置使用top:0; bottom:0;.
回答by fujy
How about using absoluteposition
如何使用absolute位置
.child-div {
position:absolute;
left:0;
right:0;
}
