html - html页面中固定侧边栏的样式

Question

这是我想要的 HTML 代码:

HTML

<div id="top-bar"><nav>...</nav></div>
<div id="page-area">
    <div id="side-bar"></div>
    <div id="content"></div>
</div>

对于所有屏幕，“顶栏”的高度固定为 60 像素。我希望正确设置其余高度以使其响应。如何让“侧边栏”占据页面的整个高度，在顶部留出 60 像素用于导航？

Answer 1

在 CSS3 中，您可以为规则值指定 calc。

假设您的页面上没有其他内容，您可以执行以下操作:

#page-area {
  height: calc(100vh - 60px);
}