Css 内容最小高度100%减去可变导航栏/页脚高度

所以我的导航栏和页脚的高度是可变的。我希望我的页脚粘贴在底部，并且

#content

填充之间可用的垂直空间-即使

#navbar

+

#content

+'#页脚实际空间将小于显示高度

不幸的是，我不知道如何才能做到这一点，所以我只是在问，没有任何我可以展示的东西——我尝试了一些东西，但没有成功：|

---

这是您的基本Flexbox布局和您的要求，请阅读代码中的注释，并从以下位置开始学习如何灵活使用您的站点：

片段

html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
正文{
最大宽度：100%；
最大高度：100%；
margin:0 auto/*center body if max width这里是最简单的jQuery解决方案，代码中有解释：

 -------------------------------
| #navbar                       |
|-------------------------------
|                               |
|         #content              |
| fill available vertical space |
|                               |
|                               |
 -------------------------------
| #footer                       |
|-------------------------------

jsiddle链接：
您可以使用100vh高度


正文{
保证金：0；
}
navbar先生{
排名：0；
左：0；
右：0；
填充：15px；
位置：固定；
背景：黑色；
文本对齐：居中；
}
纳瓦尔先生{
保证金：0；
填充：0；
}
navbar ul li先生{
显示：内联块；
}
navbar ul li a.先生{
颜色：#ffffff；
填充：10px 25px；
文字装饰：无；
}
/*////内容////*/
.内容{
溢出：自动；
背景：#f8f8；
保证金：48px 0 48px 0；
高度：计算（100vh-96px）；
}
.含量h2{
保证金：0；
}
.content:：-webkit滚动条{
宽度：8px；
边界半径：10px；
背景色：#d9d9d9；
}
.content:：-webkit滚动条拇指{
边界半径：10px；
背景颜色：灰色；
}
.content:：-webkit滚动条轨迹{
边界半径：10px；
背景色：#d9d9d9；
}
/*////页脚////*/
页脚{
左：0；
右：0；
底部：0；
位置：固定；
背景：黑色；
文本对齐：居中；
填充：15px 15px；
}
页脚p{
保证金：0；
颜色：#ffffff；
}








你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
版权

我们可以看看您当前的HTML/CSS/JS设置吗？您可以设置它吗？选中此项：，这里有两种方法可以帮助您
flexbox
和
table/table row
@verunar，感谢大家竖起大拇指！如果您在IE11中遇到flexbox元素大小问题，请使用
flex grow:1
，而不是简写e> flex:1

，加上IE11需要一个宽度。现在我不再使用速记，只是为了确保。此外：确保

页脚高度

至少是

行数*行高+填充顶部/底部

，否则它将溢出并在页脚下方产生不需要的空间（头发拉扯拼图，我学到了艰苦的方法）。正如你所知。最后：这已经快5年了，学到了很多，如果你需要更多的帮助，请在这里发表评论！

jQuery(document).ready(function(){

var navHeight = $(".navbar").height(); // Get nav height
var footerHeight = $("#footer").height(); // get footer height
var windowHeight = $(window).height(); // get window height
var content = $("#content"); 

    content.height(windowHeight - navHeight - footerHeight); // do math
    console.log(content.height()); // for testing

// Dont forget to call it on resize also
$(window).resize(function() {
    content.height(windowHeight - navHeight - footerHeight);
});

});