垂直缩小窗口高度时侧边栏内容被固定头部遮挡及滚动异常问题求助

• 窗口高度垂直缩小时为侧边栏添加滚动条，侧边栏内容会被固定头部（fixed header）遮挡
  
• 尝试添加与头部高度相等的margin后，侧边栏滚动条无法滚动到底部，无法展示全部内容
  

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代码 #

/* 平板横屏模式下的侧边栏样式 */
@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;
    }
}

原遮挡问题修复后出现新问题：仅在平板横屏模式下，侧边栏内容会被侧边栏底部遮挡，表现为类似有margin阻挡内容展示的效果。

内容的提问来源于stack exchange，提问作者Nima Zarei