垂直减小窗口高度时，侧边栏内容位于固定标题下

Question

当我尝试在窗口高度垂直减小时向边栏中添加滚动条时，内容会位于我的固定标题下。

像这样：

我尝试添加页眉大小的边距，但滚动条无法到达边栏的底部。

像这样：

这是我的侧边栏的代码：

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;
    }
}

整个项目及其代码在我的GitHub 页面上，页面本身是here。

更新：

按照 Philo 的解决方案后，问题得到解决，但发生了其他事情。侧边栏的内容位于侧边栏的底部，好像有一个边距挡住了它们。这只发生在“平板电脑版图”中。

像这样：

Answer 1

嗨，

.sidebar article高度指定的问题

旧答案

在.sidebar .article中添加height: calc(100vh - "margin-top-value")

像这样：

height: calc(100vh - 75px)

更新

只需从.sidebar article 中删除height 属性或使用height: auto

让浏览器检测到最佳高度

见