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

时间:2019-05-08 14:32:13

标签: css reactjs sass

我正在研究ReactJS项目,并且遇到CSS问题。我将确切说明我想要实现的目标以及到目前为止我已经完成的工作。

我的fluidContainer是具有灰色背景的div。

这是我现在拥有的:

enter image description here

这是我想要实现的目标,我希望消除该空间:

enter image description here

我使用负边距并使流体容器变大,但这对我来说是不好的代码,所以这是我的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;
}

但是这些是结果:

enter image description here 任何帮助将不胜感激。

1 个答案:

答案 0 :(得分: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%)。

Example of the layout