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

【问题标题】：Styling for fixed side bar in html pagehtml页面中固定侧边栏的样式
【发布时间】：2017-07-25 22:13:01
【问题描述】：

这是我想要的 HTML 代码：

HTML

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可以添加

body {padding-top:60px}

【讨论】：

为什么要投反对票？使用固定栏，如果正文没有填充，则内容位于栏的后面。
我不知道为什么这被否决了，我没有尝试过，因为@ne1410s 的解决方案对我来说非常有效。但是，我猜这个会有 padding-top。
我预计由于缺乏解释而被否决。 SO 不仅是为了帮助，也是为了教学。给出 OP 的详细信息不起作用的原因以及您的原因可能会为社区增加价值。
对不起，@AnthonyHorne，在最初的问题中没有解决问题的请求。也许我的回答不完整，但我认为在这种情况下没有必要对填充的工作原理进行全面解释。
@user3083618 我听到了，但是用户提出这个问题的事实意味着他对填充/样式的了解并不完整。我没有投票给你，但我猜这是因为它被“标记为质量差的答案” - 不完整 - 正如你所说。