我想让我的内部div 100%宽度的身体,而不是100%的父div.这可能吗？
布局如下所示:
<body>
<div> /** Width:900px; **/
<div> /** This I want 100% of BODY, not of parent div **/
</div>
</div>
</body>
Sha*_*ora 11
我希望你看起来像这样...........看看演示
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
position:absolute;
left:0;
right:0;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
------------- **
第二个答案没有定位,但有一些技巧我在这里使用所以请检查下面提到的代码和演示: -
HTML
<body>
<div class="parent"> /** Width:900px; **/
<div class="child"></div>
</div>
<div class="inner"> /** This I want 100% of BODY, not of parent div **/</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
小智 5
您可以使用 vh 和 vw 单位
.parent {
width: 900px;
height: 400px;
background-color: red;
}
.child {
width: 100vw;
height: 200px;
background-color: blue;
}
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>