Homehtml – Sidebar content goes under fixed header when lowering window height vertically.

html – Sidebar content goes under fixed header when lowering window height vertically.

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:

Enter image description here.

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>&copy; 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.

With over 500+ clients 711 web services  is a frontrunner in providing end to online business solutions to medium and small enterprises in their budget

Useful Links

Contact

© [2023-24] 711web  Services All Rights Reserved.