Html CSS-具有恒定宽度内容的全宽粘性页脚

我想使用CSS创建一个“粘性”页脚，如果页面内容的高度不超过浏览器高度，它会粘在页面底部。但是，我希望页眉和页脚填充整个屏幕宽度，中间有一个固定宽度的内容块，扩展两者之间的整个高度。我得到的最接近的是下面的例子，但是我无法得到灰色内容块来填充页眉和页脚之间的整个高度

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #fff;
    }
    #wrapper {
        min-height: 100%;
        position: relative;
    }
    #header {
        background: #ff0;
        height: 40px;
    }
    #content {
        padding: 10px;
        padding-bottom: 40px; /* Height of the footer */
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        background: grey;
        height: 100%;
    }
    #footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 40px; /* Height of the footer */
        background: #6cf;
    }
</style>

身体{
保证金：0；
填充：0；
身高：100%；
背景：#fff；
}
#包装纸{
最小高度：100%；
位置：相对位置；
}
#标题{
背景：#ff0；
高度：40px；
}
#内容{
填充：10px；
填充底部：40px；/*页脚高度*/
宽度：700px；
左边距：自动；
右边距：自动；
背景：灰色；
身高：100%；
}
#页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
高度：40px；/*页脚高度*/
背景：#6cf；
}

标题
内容
页脚

我相信这就是您想要的：

html，正文{
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
身高：100%；
位置：相对位置；
}
#标题{
背景：#ff0；
高度：40px；
}
#内容{
填充：10px；
宽度：700px；
左边距：自动；
右边距：自动；
背景：灰色；
最小高度：计算（100%-40px-40px-20px）；/*100%-页眉高度-页脚高度-垂直填充*/
}
#页脚{
位置：相对位置；
宽度：100%；
高度：40px；/*页脚高度*/
背景：#6cf；
}

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。鲁特鲁姆广场的权杖。佩伦茨克在莫莱斯蒂狮子座，坐着艾米特·萨吉蒂斯·维利特。最后一个问题是，我们必须解决这个问题。努拉姆在梅特斯非猫埃吉斯塔斯亨德雷特id非自由人。Donec拍卖人不在维内那提斯。无斜纹或无斜纹的矢状碳酸钠。这是威尼斯的圣餐。Lorem ipsum dolor sit amet，是一位杰出的献身者。
梅塞纳斯·韦尔夸姆·普鲁斯。普雷森特·塞德·埃利芬德·费利斯。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。这是一个很好的例子。这是一个很好的例子。佩伦特斯式的比勒蒂姆，高贵的法利特·奎斯·波苏尔，尼斯勒·韦利特·伊莱芬德·尼西，伊莱芬德·斯克利尔·马格纳·自由非尼斯勒。这是一种短舌苔，一种短舌苔。Sed Sed enim tincidunt，vehicula felis eu，孕妇。内克前庭，静脉曲张前庭，多洛前庭。金樱子。无便利。我是朗卡斯，我是塞德，亨德雷特·里索斯。克拉斯和普尔维纳·泰卢斯，在弗林蒂利亚·图皮斯。
发酵玉米饼，欧盟设施为nisi congue。多奈克·ac·努拉·朗卡斯、自由生命调味品、康格·利古拉。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。费吉亚阿利夸姆的杜伊斯·福西布斯·尼西。这是一个非常有趣的故事。我们必须提高车辆的效率。埃尼安·朗卡斯·莫莱斯蒂·埃吉特·波特提托。魁梧的贵胄。弗林蒂利亚的维瓦摩斯·马蒂斯扫描电镜。
他是一位杰出的作家，他在《ultricies suscipit》中扮演着爱神的角色，在《Stincidunt nisi》中扮演着智者的角色，他在《ultricies Efficity》中扮演着重要角色。发酵莫利斯奥古斯前庭，非易感毛里斯乌兰科珀a。欧盟的前总督毛里斯。这是一只乌龟，坐在里面。Nam vel lorem cursus，varius diam vitae，finibus sem。杜伊斯·欧伊斯莫德·利古拉。在hac habitasse Plateum，一句名言。
在前拉齐尼亚，我是孕妇尼布·维尼纳提斯。阿利夸姆·奥雷姆·乌尔纳，普尔维纳尔·阿西姆，乌兰科珀·莫利斯·阿库。前庭前中耳超声心动图，斜颈，波苏尔直径。但在尤伊斯莫，亨德雷特，法雷特拉·奥古斯。这是我的错。南罗纳-奥纳-萨皮恩，罗纳-卡二氏生命。pulvinar号、leo ut semper posuere号、Vignessim号、ac Vehicle nisl nisl id velit号。Nam dictum leo nunc，在lobortis tellus中。这是一只羚羊，它是一只生命之躯，它是一只欧洲之躯。马格里斯·费利斯库拉比图尔、马提斯·奎斯维内那提斯、维内那提斯和马格里斯。埃尼亚苏打水turpis non-fringilla iaculis。莫比·波特·尤伊斯莫德·利古拉，位于尼斯拉·乌兰科佩尔广场。不，我爱你，我爱你。这是一种美丽的玫瑰。直径为尤兰科佩尔的整型贵宾。这是一个很好的例子，但这是一个很好的例子。
页脚

我没有听说过calc，但我遇到过好几次需要类似的情况。我总是用Javascript解决这些问题。问：对于不支持calc作为回退逻辑的浏览器，是否有一种非Javascript的calc替代方案？谢谢！我会保留这个问题，以防有更多跨浏览器支持的解决方案。@LajosArpad Calc是CSS3附带的，据我所知，这是创建此效果最受支持的方法。flex可能也可以做同样的事情，但是它的浏览器兼容性更差，我认为需要更长的时间才能达到这个效果。就我个人而言，我认为这是使用纯CSS的最佳方式，JavaScript可以轻松做到这一点，而且web上已经有大量内容，因此我不在这里详细介绍。尽管我刚刚意识到，当内容比浏览器窗口长时，它不起作用，因为页脚停留在窗口的底部而不是内容的底部。在css中将高度：100%更改为最小高度：100%似乎可以解决这个问题。克里斯，这是个好地方！现在我的答案中更新了：）

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>