Html 如何使用flexbox使我的边栏、右栏、页眉、页脚固定为可滚动内容？

我需要做一个固定的页眉，页脚，侧边栏和右栏与广告固定的内容是可滚动的。 我试图使页眉和页脚在flexbox之外。中间的页面在一个包装器中，使用flexbox作为3列。我使用sticky属性来修复标题，使用fixed属性来修复侧边栏。但现在侧边栏与页脚重叠，我不知道为什么。这些就是我面临的问题

页面水平结束后，右侧有一个间隙。我尝试对整个HTML正文使用100%宽度，但它不起作用。还有差距

固定侧边栏与页脚重叠。我试着用calc来调整高度，但不起作用

尽管我使用了sticky属性，但在scroll到达底部后，广告栏仍在滚动。它应该保持固定，对吗

另外，当我水平减小窗口的大小时，即使中间、标题和主要内容减小了大小并进行了调整，右边的列也会消失。我试图将整个包装的宽度设置为100%，但右边的列仍在消失。 我想避免使用overflow属性，而且我是flexbox新手，但我不知道如何保持固定列

html正文{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
字体系列：“Roboto”，无衬线；
}
#顶{
位置：粘性；
顶部：0px；
z指数：1；
}
#标题{
宽度：100%；
背景色：#32404d；
位置：相对位置；
高度：85px；
}
#收割台img{
宽度：300px；
位置：相对位置；
左边距：30px；
最高：50%；
转化：translateY（-50%）；
}
#标题p{
浮动：对；
位置：相对位置；
右边距：30px；
最高：50%；
转化：translateY（-125%）；
颜色：#dfe9ed；
字号：600；
}
.包装纸{
显示器：flex；
弯曲方向：行；
}
#导航{
高度：计算（100vh-90px）；
宽度：200px；
背景：#4b5c6e；
位置：固定；
}
.主要内容{
左边距：200px；
位置：粘性；
顶部：85px；
左侧填充：30px；
右边距：30px；
字体大小：15px；
字体大小：400；
颜色：#343e47
}
#标题{
颜色：#4b5c6e；
宽度：465px；
边框底部：2.8px实心#313c47；
字体大小：45px；
边缘顶部：20px；
边缘底部：20px；
线高：1.1；
字号：500
}
#对{
宽度：180px；
高度：计算（100vh-90px）；
位置：粘性；
顶部：85px；
}
.广告{
填充顶部：20px；
背景色：#eaf2fa；
}
#htmlimg{
左侧填充：20px；
填充顶部：10px；
}
#页脚包装{
宽度：100%；
}
#页脚{
字体大小：小；
填充：0.3em；
高度：40px；
颜色：白色；
背景：#32404e；
边缘底部：0px；
}
#页脚p{
浮动：对；
位置：相对位置；
顶部：0px；
右：40px；
左边距：500px；
边缘底部：0px；
}

欢迎您








欢迎来到公司
Lorem ipsum dolor sit amet，是一位杰出的献身者。弓形前庭

这是一个很好的例子。纳勒姆·佩伦茨克孕妇利奥，元素
帕特

©泰洛公司

尝试添加以下样式

#right {
        height: calc(100vh - 134px);
    }

#footer-wrapper {
    z-index: 1;
    position: relative;
}

.maincontent {
    height: calc(100vh - 150px);
    overflow-y: scroll;
}