Question

我现在有这样的东西...我希望内容是页面的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>

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

Answer 2

放一个padding-top：

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

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

Answer 3

为什么不给它一个下限：

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

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

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

Answer 4

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

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

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

4 个答案: