CSS居中布局，背景覆盖外部元素

Question

我的布局很简单，但是很难解决。

简而言之

• 我的布局居中
• 侧边栏背景应该一直延伸到左侧
• 章节背景应该一直延伸到右侧
• 背景只能是视觉效果，布局仍居中
• 这些部分的高度未知
• 我试图用css网格解决它，将它排成一个完整的布局，但后来我失去了中心的分组
• 我已经尝试过@Query("SELECT f FROM Fish f" + " JOIN f.waterHardness wh" + " WHERE f.tankMinVolume <= :tankVolume" + " AND f.tankMinLength <= :tankLength" + " AND f.tankMinDepth <= :tankDepth" + " AND f.minWaterTemp <= :tankTemp" + " AND f.maxWaterTemp >= :tankTemp" + " AND wh.id IN :waterHardnessIds") List<Fish> findBySearch(@Param("tankVolume") int tankVolume, @Param("tankLength") int tankLength, @Param("tankDepth") int tankDepth, @Param("tankTemp") int tankTemp, @Param("waterHardnessIds") List<Long> waterHardnessIds); :before的绝对位置，但是当我在容器上使用:after滚动时失败了。
• 我不想用javascript解决

overflow-y

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: #eee;
}

main {
  margin: 0 auto;
  width: 600px;
  background: #ddd;
  height: 100%;
  display: flex;
}

aside {
  background: #ccc;
  height: 100%;
  width: 100px;
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
}

section {
  display: block;
  width: 100%;
}

section.blue {
  background: blue;
 }
 
 section.yellow {
  background: yellow;
 }
 
 section.green {
  background: green;
 }

结果外观的图片

Answer 1

您可以像下面那样使用CSS网格和一些填充技巧来做到这一点：

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: grid;
  grid-template-areas:"aside aside content content";
  grid-template-columns:1fr 100px 500px 1fr
}

aside {
  background: #ccc;
  height: 100%;
  grid-area:aside;
  padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
  overflow-y: auto;
}

.content {
  overflow-y: auto;
  grid-area:content;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside>Aside</aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue</section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

使用flexbox具有相同技巧的另一个想法：

html,
body {
padding: 0;
margin: 0;
height: 100%;
}

.wrap {
  height: 100%;
  background:#eee;
}

main { 
  background: linear-gradient(#ddd,#ddd) center/600px 100% no-repeat;  /*Color only 600px */
  height: 100%;
  display: flex;
}

aside {
  background: #ccc;
  height: 100%;
  flex-basis:100px; /* main width */
  flex-grow:1; 
  overflow-y: auto;
}
aside div {
    padding-left: calc(100% - 100px); /*the content inside only 100px on the right*/
}

.content {
  overflow-y: auto;
  flex-basis:500px; /* main width */
  flex-grow:1;
}

section {
  padding-right:calc(100% - 500px); /*the content inside only 500px on the left*/
}

section.blue {background: blue;}
section.yellow {background: yellow;}
section.green {background: green;}

<div class="wrap">
  <main>
    <aside><div>Aside</div></aside>
    <div class="content">
      <section class="blue"> Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue</section>
      <section class="yellow">Yellow</section>
      <section class="green">Green</section>
    </div>
  </main>
</div>

Answer 2

使用 CSS网格布局的解决方案-也许有些冗长的解释，但是您可以使用：

• 将aside和content放入4列网格的第二列和第三列（使用grid-template-columns: 1fr 100px 500px 1fr），

• 使用负边距和填充将第二列（aside）扩展到第一列：

  margin-left: calc(-50vw + 300px);
  padding-left: calc(50vw - 300px);
  
  

  （请注意50vw - 300px是第二和第三列之后的最左边和最右边的列的宽度600px）

• 类似地使用以下方法扩展第三列（content）：

  margin-right: calc(-50vw + 300px);
  padding-right: calc(50vw - 300px);
  

• content是带有 pseduo元素的列flexbox ，该元素负责背景（如果需要），

  >

• 现在使用section扩展了蓝色，黄色和绿色的padding-right: calc(50vw - 300px)背景。

请参见下面的演示

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  background: #eee;
}

main {
  background: #ddd;
  display: grid; /* grid container */
  grid-template-columns: 1fr 100px 500px 1fr; /* 4 columns */
  height: 100%;
}

aside {
  background: #ccc;
  height: 100%;
  width: 100px;
  overflow-y: auto;
  grid-column: 2; /* place in second column */
  /* extend to first column */
  margin-left: calc(-50vw + 300px);
  padding-left: calc(50vw - 300px);
}

.content {
  grid-column: 3; /* place in thrid column */
  /* extend to fourth column */
  margin-right: calc(-50vw + 300px);
  padding-right: calc(50vw - 300px);
  /* column flexbox for the sections */
  display: flex; 
  flex-direction: column;
  overflow-y: auto;
}

.content:after { /* serves as background*/
  flex: 1;
  content: '';
  background: #bbb;
}

section { /* extend sections to fourth column*/
  width: 100%;
  padding-right: calc(50vw - 300px);
}

section.blue {
  background: blue;
}

section.yellow {
  background: yellow;
}

section.green {
  background: green;
}

<div class="wrap">
  <main>
    <aside>Aside - some text here some text here some text here some text here some text here some text here some text here </aside>
    <div class="content">
      <section class="blue">Blue - some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="yellow">Yellow - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
      <section class="green">Green - some text here some text here some text here some text here some text here some text here some text here some text here some text here </section>
    </div>
  </main>
</div>