我现在有这样的东西...我希望内容是页面的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>
答案 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;
}
答案 2 :(得分:0)
为什么不给它一个下限:
#content {
height: calc(100% - 100px);
}
使用它,它将计算您需要的总高度! :)然后应用它。
答案 3 :(得分:0)
你可以用......来实现同样的效果。
#content{
display: block;
margin-top: 100px;
}