我想让子组件的宽度等于父组件的宽度。
父组件宽度为一个具体值比如说1000px.我将子组件宽度设为了100%。按道理说应该是可以等于父组件的宽度的,但结果并没有,而是通栏了。然后我又将子组件宽度设为了inherit。结果宽度就是父组件的宽度了。
//父组件
<div class="app-container">
<Header></Header>
</div>
<style lang="less" scoped>
.app-container {
padding-top: 45px;
padding-bottom: 50px;
width: 80%;
margin: 0 auto;
}
</style>
//子组件
<div class="header-container">子组件</div>
<style lang="less" scoped>
.header-container {
height: 45px;
width: inherit;
background-color: #1d7bff;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: fixed;
top: 0;
z-index: 999;
}
</style>
出现这个问题的原因
原来我忘记了子组件设了绝对定位,但父组件没有设置相对定位。所以子组件脱离了父组件,导致子组件的百分之百直接和body的宽度一致了。而子组件虽然定位上脱离了文档流,但在节点树上他依然是父组件的儿子,所以如果设置width:inherit的时候,浏览器会将父组件的宽度赋值给他。
解决:
就是给子组件的宽度设置成width:inherit 或者给父组件设置position: relative
![](https://i-blog.csdnimg.cn/blog_migrate/efc64cc0ac1fe31655d406a5fc585673.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f37c9566be7edbba290a8c7c8659f948.png)
最后
如果还有什么疑问或者建议,可以多多交流,文笔有限,才疏学浅,文中若有不正之处,万望告知。