CODEWITHSUNDEEP
htmlcssscrollbarcss-positionsidebar
Nima Zarei
Nima Zarei

Reputation: 1222

Sidebar content goes under fixed header when reducing window height vertically

When I try to add a scroll bar to my sidebar when the window height is reduced vertically, the content goes under my fixed header.

Like this:

enter image description here

I tried adding a margin the size of my header but the scroll bar won't reach the bottom part of my sidebar.

Like this:

enter image description here

This is the code for my sidebar:

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 GitHub page and the page itself is here.

UPDATE:

After following Philo's solution, the problem is fixed but something else is happening. The content of the sidebar go under a bottom of sidebar as if there's a margin blocking them. This only happens in "Tablet Landscape".

Like this: enter image description here

Upvotes: 1

Views: 779

Answers (1)

user15889308
user15889308

Reputation:

Hi,

The problem specified in height of .sidebar article

Old Answer

Add height: calc(100vh - "margin-top-value") in .sidebar .article

like this:

height: calc(100vh - 75px)

Update

Just Delete the height property from .sidebar article or use height: auto

To let the browser detect the best height

See

enter image description here

Upvotes: 2

Related Questions