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

Question

我正在做一个 ReactJS 元素，我正面临一个 CSS 问题。我将准确解释我想要实现的目标以及我到目前为止所做的事情。

我的 fluidContainer 是灰色背景的 div。

这是我现在拥有的:

这就是我想要实现的，我希望消除那个空间:

我使用负边距并使我的流体容器更大，但这对我来说是错误的代码，所以这是我的 react 组件:

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 是视口(viewport)宽度的度量，因此 50vw 是视口(viewport)宽度的 50%)。