Html 创建带有页脚和侧边栏的100vh页面时出现问题

我正在尝试制作一个内容滑块，旁边有一个聊天框，底部有一个页脚

以下是我试图实现的目标的示意图：

下面代码的问题是聊天框是页面的高度。我希望聊天框停在页脚，这样它就是页面的高度-60px

以下是我目前掌握的情况：

正文{
保证金：0；
}
.包装纸{
背景#95a5a6；
显示：表格；
高度：100vh；
宽度：100%；
}
.内包装{
显示：表格单元格；
左侧填充：300px；
填充底部：60px；
垂直对齐：中间对齐；
文本对齐：居中；
}
.聊天室{
背景：#bdc3c7；
最小高度：100%；
位置：绝对位置；
溢出x：隐藏；
溢出y：自动；
宽度：300px；
z指数：2；
}
.页脚{
背景#2c3e50；
底部：0px；
高度：60px；
位置：绝对位置；
宽度：100%；
z指数：1；
}

内容

您可以使用CSS calc（）来实现这一点。将此最小高度：calc（100%-60px）添加到.chatbox。有关的详细信息

正文{
保证金：0；
溢出x：隐藏；
}
.包装纸{
背景#95a5a6；
显示：表格；
高度：100vh；
宽度：100%；
}
.内包装{
显示：表格单元格；
最小高度：100%；
左侧填充：300px；
填充底部：60px；
}
.聊天室{
背景：#bdc3c7；
最小高度：计算（100%-60px）；
位置：绝对位置；
溢出x：隐藏；
溢出y：自动；
排名：0；
宽度：300px；
z指数：2；
}
.页脚{
背景#2c3e50；
底部：0px；
高度：60px；
位置：绝对位置；
宽度：100%；
z指数：1；
}

---

您只需添加以下内容：

.wrapper{
  position: relative;
}

在您的代码中，

chatbox

div的高度为身体的100%。但是如果您设置

位置：relative到它的父级（.wrapper）它的高度将为其父级的100%

这是使用flex执行此操作的简单方法：


正文{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
.包装纸{
背景#95a5a6；
显示器：flex；
弹性：1；
}
.聊天室{
背景：#bdc3c7；
溢出x：隐藏；
溢出y：自动；
宽度：200px；
}
.页脚{
背景#2c3e50；
高度：60px；
}

内容
这是一个仅使用flex和
calc（）的简化版本。
：


正文{
显示器：flex；
柔性包装：包装；
保证金：0；
}
.聊天室{
flex:0300px；
高度：计算（100vh-60px）；
溢出y：自动；
背景色：#bdc3c7；
}
.内容{
弹性：1；
背景色：#95a5a6；
}
.页脚{
弹性基准：100%；
高度：60px；
背景#2c3e50；
}

内容
问题是它的父级wrapper是100vh，所以如果我这样做，那么聊天框就会在页脚上显示：啊，有道理！你喜欢迈克尔的答案吗？我需要做一个关于flexbox的教程。是的，就是这个。学习flex boxTo learning flex对你来说是非常非常好的，首先阅读这篇基本文章：然后阅读这篇文章：很棒而且干净，但是我如何垂直对齐内容呢？谢谢你的介绍！