Html 引导4.5，分离滚动条，并使Div粘到底部
我正在尝试使用Bootstrap4.5跨3列组织一些元素 中柱将有一个较长的主体 右列的内容（2个div）应固定在顶部/底部。我很难让底部元素粘住。元素自动展开，我希望它从底部自动展开 我用Tocify作为我的ToC，在右栏的顶部 左列有几个div。最上面的是一面横幅，我想贴在那里。其他部门则不那么重要。根据视口的大小，此列可能会溢出，在这种情况下，我希望此左列有一个独立的滚动条。应该有2个独立的滚动条（网页滚动条和左面板滚动条） 下面是一个引导加载的提琴示例（用一个长的主体来演示该问题）：Html 引导4.5，分离滚动条，并使Div粘到底部,html,jquery,css,bootstrap-4,jquery-tocify-js,Html,Jquery,Css,Bootstrap 4,Jquery Tocify Js,我正在尝试使用Bootstrap4.5跨3列组织一些元素 中柱将有一个较长的主体 右列的内容（2个div）应固定在顶部/底部。我很难让底部元素粘住。元素自动展开，我希望它从底部自动展开 我用Tocify作为我的ToC，在右栏的顶部 左列有几个div。最上面的是一面横幅，我想贴在那里。其他部门则不那么重要。根据视口的大小，此列可能会溢出，在这种情况下，我希望此左列有一个独立的滚动条。应该有2个独立的滚动条（网页滚动条和左面板滚动条） 下面是一个引导加载的提琴示例（用一个长的主体来演示该问题）： 页
页脚仍然在那里（底部）。我认为您没有看到它，因为JSFIDLE的控制台覆盖了它
这是我制定的解决方案。有三列的容器，溢出：隐藏，高度：100vh以避免页面滚动。和三列溢出滚动，允许平行滚动 我想你的其他要求都满足了。左侧和右侧的顶部组件标记为灰色，顶部标记为tay。评论保留在页面和列的底部。并且页脚是可见的
html，
身体{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
宽度：100vw；
高度：100vh；
边框：实心1px红色；
溢出：隐藏；
}
上校{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
高度：自动；
溢出：自动；
填充：3倍；
}
.col-md-2{
宽度：16.666 7%；
}
.col-md-4{
宽度：33.3334%；
}
.col-md-6{
宽度：50%；
}
.中心{
背景颜色：绿色；
文本对齐：对齐；
}
.粘头{
位置：固定；
宽度：继承；
排名：0；
背景颜色：灰色；
}
.粘底{
位置：粘性；
底部：0；
}
.可滚动区域{
位置：相对位置；
z指数：-1；
}
.toc{
身高：60%；
最高高度：60%；
}
.评论{
位置：固定；
底部：0；
z指数：-1；
身高：40%；
最大高度：40%；
}
页脚{
位置：固定；
底部：0；
宽度：100%；
z指数：100；
背景色：黑色；
颜色：白色；
}
这将是一些横幅。应该始终坚持在顶部。
除非元素溢出（在这种情况下，我需要一个单独的滚动条），否则此列不应与中间部分一起滚动。
这将有一个搜索栏。在小型设备上隐藏此信息。
这将有公告。在小型设备上隐藏此信息。
这将有一个内置的。在小型设备上隐藏此信息。
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个很好的例子。无直径前庭的前庭被称为二尖瓣。食指
毛里斯一颗钻石。埃吉斯塔·梅塞纳·法雷特拉·康瓦利斯·波苏尔·莫尔比·利奥·乌纳·莫莱斯蒂。奥古斯·内克（Augue neque）是一位在发酵液和溶液中的孕妇。阿梅特·普卢斯（Amet purus）是一位在哈奇（hac）的布朗迪特·图皮斯（blandit turpis）。大鼠前庭。奎斯
孕鼠睾丸悬吊术。但是，在威尼斯的阿梅特，奥奇·奥奇没有一位显贵。前庭陷窝是一个非正常的拱门。
Amet venenatis urna cursus eget nunc scelerisque viverra。
Sodales ut eu sem integer vitae justo eget。元素性暂时性耳垂。乌拉姆科珀临时会议上的格言是一个空白。设备水平是指设备在使用过程中的水平。乌尔纳·杜伊斯·康瓦利斯·康瓦利斯·泰勒斯。布朗迪马萨酒店
马蒂斯·埃尼姆·尤特。非特鲁斯·奥奇亚克·坦普斯·埃吉斯塔斯（Tempus egestas）的征服者被视为是一位权贵。利奥维尔奥奇波尔塔发酵酒店。两名士兵坐在一个没有设施的地方。利奥·维尔·弗林利亚设施元素
我是乌兰科佩尔·埃吉特。调味品lacinia quis vel eros donec ac.Felis eget velit aliquet sagittis id concertetur purus。弗林蒂利亚·穆比·奥古斯·奥古斯特·尤伊斯莫。福西布斯是一个佩伦特式的坐在港口的人。萨皮安·埃吉特·米
自由主义者被剥夺了权利。没有门楣，也没有前庭，也没有前庭。马蒂斯·佩伦茨克，也没有前庭，也没有前庭。Elit duis tristique sollicitudin nibh sit。viverra maecenas accumsan lacus酒店
威尔。射手座的命脉和狮子座的直径。Mauris vitae ultricies leo integer malesuada nunc vel。在波苏尔发酵液中添加三重发酵液。人鱼。妊娠期易感症状
A.埃吉特·洛雷姆·多洛·塞德·维韦拉·伊普苏姆·努克。Orci eu lobortis element um nibh tellus molestie nunc non。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产
粗发酵食品。在维塔·图皮斯的作品中，这首曲子是狮子座的。乌兰科帕·维利特·塞德·乌兰科帕·莫尔比·廷西登·奥纳雷。坐在一个空的地方。圣人、圣人、圣人和圣人。维尼那提猫的身份证
箭叶紫菜是一种权杖。Faucibus et molestie ac feugiat为mattis ullamcorper的前庭讲道。我想这是一种无效力的侵权行为。孕妇腹痛是一种温和的疾病。非箭毒孕妇
阿库·阿克托尔·迪格森。威尼斯之门。孕母口述不含胎盘鼠睾丸。只有老李坐着，阿梅特坐着
<body>
<div class="container-fluid">
<main class="container py-3">
<div class="row">
<aside class="col-md-2">
<div class="row banner sticky-top bg-white p-3">
This will be some banner. Should always stick to the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
<hr />
</div>
<div class="row bg-white p-3">
This will have a search bar. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have announcements. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have BuiltWith. Hide this on small devices.
</div>
</div>
</aside>
<section class="content col-md-6">
Lorem ipsum dolor sit amet...
</section>
<aside class="col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>ToC Section, sticky</h3>
<hr />
This is positioned correct, pretty much.
Should stay at the top, even on small devices.
This element auto-expands to 60% height.
This is a Tocify style ToC:
<div id="toc" class="pl-1"></div>
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment section</h3>
<hr />
This should stick to the bottom of the column (and page).
This element auto-expands to 40% height.
</div>
</aside>
</div>
</main>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>
</div>
</body>
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.toc {
max-height: 60%;
}
.comments {
max-height: 40%;
}
.scrollable-area {
overflow-y: auto;
}