When I try to add a scroll bar to my sidebar, when the height of the window decreases vertically, the content goes under my fixed header.
like this:
I added a margin to the size of my header but that way the scroll bar would not reach the bottom of my sidebar.
like this:
This is my sidebar code:
HTML:
<aside class="sidebar" id="news">
<article>
<p>Cute cat becomes friend with mouse<br><a href="#">Read More</a></p>
<p>Cat and dog pose for cute family photo<br><a href="#">Read More</a></p>
<p>Woman says cat changed her life<br><a href="#">Read More</a></p>
<p>There's a new fluffy hero in New York<br><a href="#">Read More</a></p>
<p>The history of the great Egyption cats<br><a href="#">Read More</a></p>
<p>Town elects cat as new mayor<br><a href="#">Read More</a></p>
<p>Cat saves injured man<br><a href="#">Read More</a></p>
<p>More stories at our <a href="#">News Center</a></p>
<footer>© Goodie Club 2021</footer>
</article>
</aside>
CSS:
/* Sidebar for Tablet Landscape Screens */
@media only screen and (min-width: 768px) and (orientation: landscape) {
body {
grid-template-columns: 200px 4fr;
grid-template-rows: 75px 1550px;
grid-template-areas:
"header header"
"sidebar main";
}
.sidebar {
display: block;
grid-area: sidebar;
background-color: #fbeec1;
}
.sidebar article {
width: 200px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
overflow-y: scroll;
top: 0;
bottom: 0;
margin-top: 75px;
}
.sidebar article p {
margin: 0.9em 0.8em;
font-family: 'Merienda', cursive;
font-size: 0.98rem;
line-height: 1.25em;
}
.showfooter {
display: none;
}
}
The whole project with its codes is on my Gut Hub page and the page itself is here.
I would really appreciate it if you could help me solve this problem.