Как сделать рамку прикрепленной к нижней части страницы ⇐ CSS

[Anonymous]

I am making a front-end website. It contains wrapper with header, left "profile", center "main" and right "games" divs, and I can't get how to fix my border being above the end of page. Header, left and right divs serve as layout, while main should be scrollable.View of website

.header { height: 100px; background-color: #333333; position: fixed; top: 0px; width: 100%; z-index: 9999; left: 0px; } .wrapper { display: grid; grid-template-areas: "profile main games"; grid-template-rows: 1fr; } .profile { grid-area: profile; width: 298px; height: 980px; background-color: #333333; position: fixed; top: 100px; left: 0; z-index: 9998; } .avatar { width: 200px; height: 200px; border: 1px solid #343633; margin-left: 40px; margin-top: 50px; } .games { grid-area: games; width: 298px; height: 980px; background-color: #333333; position: fixed; right: 0; top: 100px; z-index: 9998; } .main { width: 1300px; height: 1000px; grid-area: main; margin: auto; bottom: 0; margin-top: 92.3px; align-self: center; background-color: #FCFCFC; border: 5px solid black; overflow: auto; }
{children}


Источник: https://stackoverflow.com/questions/781 ... f-the-page