我怎样才能拥有固定的顶栏,内容为100%

时间:2013-12-12 17:07:16

标签: html css

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

<style>

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

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

</style>

4 个答案:

答案 0 :(得分:3)

每个人都在不断推荐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;
}

答案 1 :(得分:2)

放一个padding-top

#content{
    display: block;
    height: 100%;
    padding-top: 100px;
}

http://jsfiddle.net/qbsJH/1/

答案 2 :(得分:0)

为什么不给它一个下限:

#content {
  height: calc(100% - 100px);
}

使用它,它将计算您需要的总高度! :)然后应用它。

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/calc

答案 3 :(得分:0)

你可以用......来实现同样的效果。

#content{
    display: block;
    margin-top: 100px;
}