html - 我怎样才能有一个固定的顶部栏，100% 的内容

Question

我现在有这样的东西...我希望内容占页面的 100% - 距顶部栏 100 像素。但它不起作用。

<style>

#content{
    display: block;
    height: 100%-100px; <!-- I need something to fix this, because it doesnt work -->
}

#topbar{
    height: 100px;
    display: block;
}

</style>

Answer 1

每个人都一直在建议 margin-top，但是在 100% 高度下效果不佳。

如果你想要一个真正的固定标题，试试这样的东西

#content {
  height: 100%;
  padding-top: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#topbar {
  height: 100px;
  position: fixed;
}

更新:Here is a link to a CodePen example

这是示例中的重要代码:

html, body {
  height: 100%;
}

#topbar {
  height: 100px;
  width: 100%;
  position: fixed;
}

#content {
  height: 100%;
  padding-top: 100px;
  box-sizing: border-box;
}