Html CSS：当用户向上调整内容的大小时，如何使内容和页脚具有粘性和响应性

当用户向上调整浏览器的大小时，我想让内容区域响应，同时我想让底部的页脚始终保持粘性

问题：

**1-**当用户以其他分辨率打开此屏幕时，页脚会消失，内容区域会松动一些内容

2-如果用户向上调整浏览器窗口的大小，则页脚和部分内容区域也会消失

jsfiddle：

正文{
溢出x：隐藏；
溢出：隐藏；
}
.导航栏标题{
背景：绿色；
}
.侧边栏{
背景色：#333；
右边框：1px实心#000；
颜色：#fff；
位置：固定；
宽度：17%；
身高：100%；
}
.内容{
边框：1px实心#ddd；
最小高度：700px；
背景色：#ffffff；
溢出：滚动；
溢出x：隐藏；
左边距：178px；
}
.页脚{
边框：1px实心#ddd；
最小高度：78px；
边缘顶部：10px；
填充：20px；
背景色：#f6f9fb；
}

标题
边栏
内容
页脚

你想要这个吗

你想要这个

---

看看这把小提琴，我删除了主体上的

overflow:hidden

规则，并更新了footer类上的规则

---

看看这把小提琴，我删除了主体上的

溢出：隐藏的
规则，并更新了footer类上的规则

对于.content：

height: calc(100% - 150px);

对于页脚：

position: fixed; 
bottom: 0;

对于.content：

height: calc(100% - 150px);

对于页脚：

position: fixed; 
bottom: 0;

谢谢vicent，我想要这个，唯一的问题是：页脚不能覆盖侧边栏udnerstand？需要在固定的位置，明白吗？抱歉，我想我不是很清楚，页脚需要与内容现在的大小相同，页脚不能是100%，页脚需要像第一个示例一样粘性，但已固定，明白吗？谢谢vicent，我想要这个，唯一的问题是：页脚不能覆盖侧边栏udnerstand？需要在固定的位置，明白吗？抱歉，我想我不是很清楚，页脚需要与内容现在的大小相同，页脚不能是100%，页脚需要像第一个示例一样粘性，但已固定，明白吗？