如何使我的元素占据屏幕宽度的 100%，即使它位于占据屏幕 80% 的元素内？

Question

我正在处理一个 ReactJS 项目，但我遇到了一个 CSS 问题。我将准确地解释我想要实现的目标以及我到目前为止所做的事情。

我的fluidContainer是灰色背景的div。

这是我现在拥有的：

这就是我想要实现的目标，我希望消除这个空间：

我使用了负边距并使我的流体容器更大，但这对我来说是糟糕的代码，所以这是我的反应组件：

const FluidContainer = props => (
    <div
       className="co-fluid-container"
   >
        {props.children}
    </div>
);

这是我的 sass 文件和我已经尝试过的：

@import "../../appConstants/style/cssVariables.scss";
.co-fluid-container {

//TODO: améliorer la précision
margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 99vw) /2) );
padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

&--fluid-content {
   padding: 40px 20px;
}

@media($extra-small){
  // a justifier
  width:calc(100vw + #{$grid-gutter}*5);
  margin-left: calc(-#{$grid-gutter}*3/2);
}
@media($small) {
  // a justifier
  width: calc(100vw + #{$grid-gutter}*5);
  margin: 0 calc(-#{$grid-gutter}*3);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($medium){
  width:calc(110vw);
  margin-left: calc(-#{$grid-gutter}*3/2);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($large){
  margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 100vw) /2));
  padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

}
}

这段代码给我带来了问题，当我尝试让我的页面响应时，这里是我在代码中使用的变量：

grid-gutter : 32 px;
container: 1170px;
extra-small: "max-width: 599px"
medium and large and small are breakpoints too .. 

这是我也尝试过的一个解决方案，使用相对和绝对定位但仍然出现问题，所以我将渲染元素更改为：

const FluidContainer = props => (
    <div className="co-fluid-conteneur">
        <div className="co-fluid-container">{props.children}</div>
    </div>
);

这就是我的风格：

.co-fluid-conteneur {
    position: relative;
    height: 300px;
}

.co-fluid-container {
    position: absolute;
    width: 100vw;
}

但这些都是结果：

任何帮助将不胜感激。

Answer 1

举个简单的例子：

将主 html 文件或元素的代码作为：

<div className="parent">
  <div className="child">
  </div>
</div>

CSS 看起来像这样：

.parent {
   position: relative;
   width: 50vw;
   height: 50vh;
   background-color: blue;
}

.child {
   position: absolute;
   width: 100vw;
   height: 40vh;
   background-color: rgba(255, 0, 0, 0.50);
}

这将产生以下布局。 （vw 是视口宽度的度量，所以 50vw 是视口宽度的 50%）。