Question

Need background color for child container extending till width of view point. Properties needed should be applied to child container only.

I tried giving huge border to child container till parent container, but it did not work in high resolution screens.

Background color should applied only to the area of text.

.outer{
        height: auto;
        border: 1px solid red;
        width: 420px;
}
.inner{
        margin-left: 100px;
        margin-right: 100px;
        width: 200px;
        height: 300px;
        border: 1px solid green;
}

<div class="outer">
    <div class="inner">Need background color for child container extending till width of view point. properties needed have to be given only within child container. 
    </div>
</div>

Here is the jsfiddle link to better understand the scenario:

https://jsfiddle.net/5qp1a3um/

Answer 1

You can set a wrapper to contain the desired color like this:

.bg-wrapper{
    background: #54BCDF; /*change to desired color*/
}
.outer {
    height: auto;
    border: 1px solid red;
    width: 420px;
    margin: 0 auto;
}
.inner {
    margin-left: 100px;
    margin-right: 100px;
    width: 200px;
    height: 300px;
    border: 1px solid green;
}

<div class="bg-wrapper">
    <div class="outer">
        <div class="inner">Need background color for child container extending till width of view point. properties needed have to be given only within child container.</div>
    </div>
</div>

Bearing in mind that you can only change the css of child container you can try with this modification of the answer of Rick to extend the background:

.outer{
    height: auto;
    border: 1px solid red;
    width: 420px;
}
.inner{
    margin-left: 100px;
    margin-right: 100px;
    width: 200px;
    height: 300px;
    border: 1px solid green;
}
.inner:before {
  content: '';
  background:  #54BCDF; /*change to desired color*/
  position: absolute;
  width: 100%;
  height: 300px;
  left: 0;
  z-index: -1;
}

<div class="outer">
  <div class="inner">
    Need background color for child container extending till width of view point. properties needed have to be given only within child container. 
  </div>
</div>

But to center .outer I'm afraid that you'll have to add the style margin: 0 auto

Answer 2

Not completely sure if I understand what you are trying to do, but I gave it a shot.

In the CSS if you change the margin to padding, then any background color on the child element will extend to the parent. background color is includes the padding but not the margin.

I also had to bump up the width of the child 20px for it to fill properly.

Updated fiddle: https://jsfiddle.net/5qp1a3um/1/

.inner{
    padding-left: 100px;
    padding-right: 100px;
    background-color: blue;
    width: 220px;
    height: 300px;
    border: 1px solid green;
}

Answer 3

Set the parent's position to relative:

.outer {
  position: relative;
}

Then create a pseudo-element on the child, which covers the extent of the parent (width and height 100%).

Give it a negative z-index so its background won't hide the content:

.inner:before {
  content: '';
  background: lightgreen;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: -1;
}

Fiddle 1

Update based on the fact that you can't style the parent

Set the child's position to relative:

.inner {
  position: relative;
}

The pseudo-element's width should now be 100% plus the difference between the child's and parent's widths.

You'll need to move the pseudo-element left to account for the child's left margin:

.inner:before {
  content: '';
  background: lightgreen;
  position: absolute;
  height: 100%;
  width: calc(100% + 220px);  /* parent's width - child's width = 220 */
  left: -100px;               /* account for left margin */
  z-index: -1;
}

Fiddle 2

Answer 4

使用填充而不是边距，这是正确的方法。

padding: 0 100px;

https://jsfiddle.net/5qp1a3um/2/

CSS background color for child container extending till parent container

4 个答案: