如何在 CSS 网格滚动时保持边框固定在 body 上？

Question

我正在为位于中心的元素使用 css 网格显示，并在页面的左侧和右侧应用彩色边框以使用 body 元素填充白色 space。

问题是边框在垂直方向上不适合屏幕。它只覆盖网格容器。因此，如果我在 body 上使用 height: 100vh;，它会起作用，但是当更多元素添加到网格容器并且我们向下滚动时，它会在一个点停止。

body 上也有一张背景图片，但由于 background-attachment: fixed;.

而保持固定

我可以为边界做些什么吗？

JSFiddle showing similar issue

Answer 1

不要样式化 <body> ，创建一个新容器并给容器一个边框

      body{
            padding: 0;
            margin: 0;
        }
        .container {
            text-align: center;

              border-left:15em solid red ;
            border-right:15em solid red ;
            
        }

        .grid-element {
            width: 70%;
            margin: 0 auto;
            text-align: justify;
            background: #fff;
            display: grid;
            grid-template-columns: 1fr;
        }

<div class="container">
        <div class="grid-element">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus quo
                asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea similique eius nobis
                possimus?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus quo
                asperiores
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vero maxime, dolores, mollitia ducimus
                    quo asperiores ea dolore deleniti saepe, voluptate ullam. Numquam nihil vel ea
                    similique eius nobis possimus?</p>
            </p>
        </div>
    </div>

如何在 CSS 网格滚动时保持边框固定在 body 上？

How to keep border fixed on body while scrolling along with CSS grid?

html

css

layout

border