使Div 100%的祖父母容器？
这是我遇到的问题: -
我有一个div设置为最大宽度960px.
div中div的宽度设置为100%,但100%表示最大值为960px
如何使960px div内的div成为用户屏幕的100%,而不将父div(100%)移出父div(960px)？
编辑进一步澄清.这是结构: -
gParentDiv
parentDiv
myDiv
我希望myDiv与gParentDiv的宽度相同,但是将它保存在parentDiv中
我希望你能提供帮助
Ita*_*tay 20
您可以使用视口的高度和宽度.
例如,以下类将使元素成为视口的大小.
.fullscreen {
width: 100vw;
height: 100vh;
}
这是一个纯CSS3解决方案,但它有一些浏览器支持问题.
如果您只想在整个屏幕上拉伸元素,可以使用不同的方法.
.fullscreen {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
- 在我的回答中没有JS. (26认同)
all*_*aps 12
如果你想让div成为"用户屏幕的100%"(视口),那么@Itay和@Fujy的答案都是正确的.
如果你想要与祖父母(960px)相同的位置,那么首先定义一个重置为grandgrandparent(body)的尺寸.然后以与祖父母相同的方式定位孩子.考虑以下代码:
<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; }.现在很容易给孩子提供与祖父母相同的声明.
body/viewport/grandgrandparent是白色,祖父母灰色,父蓝色,重置红色和子绿色:
<!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;.
- 这样做的一个缺点是重置时的绝对定位会导致子内容流过它之后的任何内容。所以我想当你在子元素中和之后有不同的内容时它不起作用。 (2认同)
- @allcaps 如果您使用的是百分比而不是像素怎么办？ (2认同)
怎样使用absolute位置
.child-div {
position:absolute;
left:0;
right:0;
}
- @user2692219 这会起作用。尝试一下 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute (2认同)
| 归档时间： |
|
| 查看次数： |
18676 次 |
| 最近记录： |