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

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

How to Set a Background Color to Sidebar Position to Span Full Page Length and to Screen's Edge on Right Side

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

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>