如何将背景颜色设置为侧边栏位置以跨越整个页面长度和右侧的屏幕边缘

Question

侧边栏显示为浅蓝色:http://www.comparayacierta.es/mejores-productos-de-hogar/mejor-centro-de-planchado

我知道我需要使用某种负边距/填充，但我似乎做不好。它直接穿过页面的末尾，进入网站的页脚。如果不移动侧边栏中的模块，我也无法让它移到屏幕右侧的边缘。

下面是我目前的代码:

.relbar {
background-color: #ccebff;
 margin: 0 0 -2000rem;
padding: 1rem 0 2000rem;
}

任何帮助都将是非常感激的。

下面是侧边栏的详细信息:

 background-color:
rgb(204, 235, 255)
;
box-sizing:
border-box
;
color:
rgb(136, 136, 136)
;
display:
block
;
font-family:
roboto, Helvetica, Tahoma, Geneva, Arial, sans-serif
;
font-size:
16px
;
font-weight:
normal
;
height:
32570px
;
line-height:
24px
;
list-style-image:
none
;
list-style-position:
outside
;
list-style-type:
none
;
margin-bottom:
-32000px
;
margin-left:
0px
;
margin-right:
0px
;
margin-top:
0px
;
padding-bottom:
32000px
;
padding-left:
0px
;
padding-right:
0px
;
padding-top:
16px
;
width:
192px
;
-webkit-font-smoothing:
antialiased

Answer 1

如何设置侧边栏位置的背景颜色以跨越整页长度和屏幕的右侧边缘

使用伪元素并删除所有额外的边距&填充等。

body {
  overflow: hidden;
}
.grid {
  height: 100vh;
  display: flex;
  width: 80%;
  margin: auto;
}
.grid-75 {
  flex: 0 0 75%;
  background: pink;
}
.grid-25 {
  flex: 0 0 25%;
  background: lightblue;
  border-right: 1px solid red;
}
.sidebar {
  position: relative;
}
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: inherit;
  z-index: -1;
}

<div class="grid">
  <div class="grid-75"></div>
  <div class="grid-25 sidebar">I'm the sidebar content</div>
</div>