这是我遇到的问题: -
我有一个div设置为最大宽度960px。
div中div的宽度设置为100%,但100%表示最大值为960px
如何让960px div内的div成为用户屏幕的100%,而不将子div(100%)移出父div(960px)?
编辑以进一步澄清。 这是结构: -
gParentDiv
parentDiv
myDiv
我希望myDiv与gParentDiv的宽度相同,但是将它保存在parentDiv中
我希望你能帮忙
答案 0 :(得分:19)
您可以使用视口的高度和宽度。
例如,以下类将使元素成为视口的大小。
.fullscreen {
width: 100vw;
height: 100vh;
}
这是纯CSS3 解决方案,但它有一些browser support问题。
如果您只想在整个屏幕上拉伸元素,可以使用其他方法。
.fullscreen {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
答案 1 :(得分:11)
如果你希望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 :(得分:1)
如何使用absolute
职位
.child-div {
position:absolute;
left:0;
right:0;
}