Как сохранить границы на теле при прокрутке вместе с сеткой CSS? - PullRequest
Новая
       27

Как сохранить границы на теле при прокрутке вместе с сеткой CSS?

0 голосов
/ 10 марта 2020

Я использую css отображение сетки для элементов, которые находятся в центре, и применяя цветную рамку на левой и правой стороне страницы, чтобы заполнить пустое пространство, используя элемент body.

Проблема в том, что рамка делает не подходит к экрану по вертикали. Он охватывает только грид-контейнер. Поэтому, если я использую height: 100vh; для тела, это работает, но когда в сетку-контейнер добавляется больше элементов и мы прокручиваем вниз, он останавливается в одной точке.

Есть также фоновое изображение на теле, но оно остается фиксированным из-за background-attachment: fixed;.

Есть ли что-нибудь подобное, что я могу сделать для границ?

JSFiddle показывает похожую проблему

1 Ответ

1 голос
/ 10 марта 2020

Не используйте <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>
...