Question

我正在为演示模板设置如何使用程序的特定部分。我将页面设置为8列网格布局，并在两边各有一个空的1fr列用于填充。我遇到的问题是，当用户向下滚动页面时，在内容后面放置背景色以抵消内容。我在想出一种解决方案时遇到了麻烦，该解决方案可将背景色跨越整个视口宽度，同时将内容保持在8个网格内。

我尝试将另一个类添加到名为“ bg”的标签中。我这样做是为了在整个视口中覆盖bg颜色，但是随后它迫使内容位于中心8个网格之外，而我不想让这些内容逃脱。我也尝试给.bg设置100vw的宽度，但是它随后再次覆盖了内容网格。

HTML

<div class="container">
<section class="cont2 bg">
        <img src="img/perf-2.png" alt="" class="cont2__img">
        <div class="cont2__content">
            <p class="cont2__content--p-1">
                For this example, we are looking at the effects of investing $10,000 in JNJ with a start date of December 1998, and how today that money would be worth about $40,566. 
            </p>
            <p class="cont2__content--p-2">
                These performance results located at the bottom you can find the average dividend growth rate for the timeframe selected with the compounded annual growth rate, the total amount of dividends paid, and the growth breakdown of the stock you are looking at.  
            </p>
            <p class="cont2__content--p-3">
                This is then in comparison to investing in the S&P 500 over the same timeframe.
            </p>
        </div>
    </section>
</div>

CSS（无礼）

// Container Grid layout
.container {
    display: grid;
    grid-template-rows: 20vh repeat(4, min-content); // I have 4 content sections for the entire project, so that's why there is repeat 4
    grid-template-columns:  [full-start] minmax(6rem, 1fr) [center-start] 
repeat(8, [col-start] minmax(min-content, 20rem) [col-end]) [center-end] 
minmax(6rem, 1fr) [full-end];
}

// Content Layout
.cont2 {
grid-column: center-start / center-end;
margin: 10rem 0;
padding: 5rem;

grid-row: 3 / 4;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); //responsive layout
grid-gap: 4rem;

&__content {
    align-self: center;
    margin-left: 2rem;
    font-size: 2rem;
    &--p-2 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

&__img {
    width: 100%;
}
}


.bg {
//width: 100vw;
//grid-column: full-start / full-end;
background-color: rgb(245, 245, 245);

//I've tried more than the commented out lines, but I've been trying it for a little bit tonight and forgot - sorry
}

我希望.bg的背景色在整个页面上流血，同时在8个中心列中保持内容的完整性。

在此先感谢您是否需要提供更多信息。

如何使背景色扩展到我的分数列中而不影响我的中间列？

0 个答案: