I am using css grid display for elements which are in the center and applying colored border on left and right side of the page to fill the white space using body element.
The problem is border does not fit the screen vertically. It only covers the grid-container. So if I use height: 100vh;on body, it works but when more elements are added to the grid-container and we scroll down, it stops at one point.
There is also a background image on body but it stays fixed because of background-attachment: fixed;.
Is there anything similar I can do for borders?
Don't style to <body> , make a new container and give container a border
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>