<div class="container">
<div class="child">
</div>
</div>
.container {
width: 800px;
height: 200px;
margin:auto;
}
现在我要给子宽度与视口宽度相同。
ps:100vw不起作用
答案 0 :(得分:1)
仅使用100vw
是不够的,您还需要将元素居中放置在容器中,以使其在两侧均等地溢出。
以下是使用flexbox居中的示例:
.container {
width: 300px;
height: 150px;
margin: auto;
background:green;
display:flex;
justify-content:center;
}
.child {
width:100vw;
flex-shrink:0; /*to avoid the shrink effect*/
height:100px;
background:red;
color:#fff;
}
body {
margin:0;
}
<div class="container">
<div class="child">
some content
</div>
</div>
您也可以考虑在没有flexbox的情况下实现负利润以达到相同效果:
.container {
width: 300px;
height: 150px;
margin: auto;
background: green;
}
.child {
margin: 0 calc((300px - 100vw)/2);
height: 100px;
background: red;
color:#fff;
}
@media (max-width:300px) {
.child {
margin: 0;
}
}
body {
margin:0;
}
<div class="container">
<div class="child">
some content
</div>
</div>