如何忽略父级填充真正的100%宽度?

时间:2015-04-11 01:59:13

标签: css

我有一个特殊的页面(内部元素),它应该忽略外部填充,但它必须是100%宽。每个页面周围都有一个容器,填充量为10px。

因此,负利润将导致低于100%的某些因素,因为有些百分比是隐藏的溢出。

margin-left: -10px /* 10px is the padding of the outer element */

如果没有移动内部元素,有没有办法忽略外部填充?
那么移除外部的填充物是可能的,但实际上需要付出很多努力。

2 个答案:

答案 0 :(得分:2)

是的,我可以自己解决。可能不是最好的解决方案,但它对我有用。太好了。

.inner {
    width: calc(100% + 10px);
    margin-left: -10px;
}

答案 1 :(得分:1)

如果我正确理解了问题,您可以使用否定margin + padding的组合来实现这一目标。



.outer {
    padding: 10px;
    background: pink; /*you should not see this*/
}
.inner {
    margin: -10px;
    padding: 10px;
    background: gold;
}

<div class="outer">
    <div class="inner">hello world!</div>
</div>
&#13;
&#13;
&#13;