Html 如何设置从其位置到页面底部的div高度，若超过，则添加滚动条？

在

html

\

css

中，我有一个

div

元素，它可以出现在页面的不同

y位置

（取决于上面填充的html）。当渲染的

div

的内容太高时会出现问题。在这种情况下，我希望

div

扩展到页面的最大高度（例如，基于屏幕分辨率），并添加一个

滚动条来匹配其内容

是否有任何纯
html
\
css
解决方案，而不使用
js

附件是div结构的一个示例。请注意，我希望在蓝色的大div中有一个卷轴，而不必绑定到特定的高度，因为我事先不知道给定的大小（它们是动态的）



我的代码
您可以使用表结构执行此操作

HTML:

<div class="container table">
   <div class="table-row">
       Top Content
   </div>

    <div class="table-row height-100">
        <div class="table-cell">
            <div class="height-100">
                <div class="scroll">
                 Bottom scrollable content with 100% remaining height
                </div>
            </div>
        </div>
    </div>
</div>

.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }

100vh
属性使
body
标记具有100%的视图高度（屏幕高度）

在表结构中，具有class
table row
的div将获得子级所需的高度，但如果它也具有
height-100
将获得其他行未占用的高度的100%。在它里面，我做了几次可怕的抽动，让溢出在动态高度
表格单元格上运行

演示：
这是一个flexbox布局，当第二个div的高度超过窗口的高度时，它会导致第二个div滚动

现场演示：

<div class="container table">
   <div class="table-row">
       Top Content
   </div>

    <div class="table-row height-100">
        <div class="table-cell">
            <div class="height-100">
                <div class="scroll">
                 Bottom scrollable content with 100% remaining height
                </div>
            </div>
        </div>
    </div>
</div>

.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }


html，正文{
保证金：0；
填充：0；
}
html，正文，#容器{
宽度：100%；
身高：100%；
}
#容器{
显示器：flex；
弯曲方向：立柱；
}
#上层{
背景色：红色；
}
#滚动{
背景颜色：蓝色；
柔性生长：1；
溢出：自动；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。默塞纳·尤里西斯·尼斯·拉库斯（Maecenas ultricies nisl lacus），艾米特·维韦拉·麦格纳·斯克利斯（amet viverra magna scelerisque a。吴茱萸（Morbi rutrum）是一种发酵液，叶子菜（vel Ultrices）是一种高贵的叶舌。南比宾杜姆·尼西在梅特斯·比宾杜姆，坐着阿梅特·特里斯蒂克·马萨·莫莱斯蒂

Lorem ipsum dolor sit amet，是一位杰出的献身者。默塞纳·尤里西斯·尼斯·拉库斯（Maecenas ultricies nisl lacus），艾米特·维韦拉·麦格纳·斯克利斯（amet viverra magna scelerisque a。吴茱萸（Morbi rutrum）是一种发酵液，叶子菜（vel Ultrices）是一种高贵的叶舌。南比宾杜姆·尼西在梅特斯·比宾杜姆，坐着阿梅特·特里斯蒂克·马萨·莫莱斯蒂。非大比勒陀利亚的比勒陀利亚，非大比勒陀利亚的比勒陀利亚。Etiam为同侧tellus。ultrices Curabitur vel nibh坐在一间公寓里。这是一种很好的方法。左前庭矢状体。悬钩子。菲塞勒斯·维尔·比本杜姆·利奥，欧盟福西布斯·尼西。位于拱门间的前庭，以及直径和弧度的门廊。阿莱奎姆·特里斯蒂克·洛雷姆·波苏尔·托托·阿莱奎特，坐在阿梅特·法雷特拉·特里斯蒂克身边。拉奥里特·泰卢斯（Maecenas Concertetur Laoret tellus）。非普通商品间的交易。Morbi非三色orci，舌骨门。在欧盟精英阶层的劳里特

这是一只小老鼠。在nisl odio，ornare在enim sit amet，mollis ultricies libero。莫里斯和奥克托·洛雷姆（Mauris et auctor lorem），在《猫科动物马克西姆斯》（maximus felis）中。这是一种很好的治疗方法。塞德·塞德·法雷特拉·利古拉。杜内克·维尼纳提斯·杜内克·维尼纳提斯·杜内克·维尼纳提斯·杜内克·维尼纳提斯·杜内克·维尼纳提斯·杜内克·维尼纳提斯·杜内克·杜内克·杜内克·。芦苇粗粉。这是一种新的生活方式。这是一种不含酒精的维韦拉芸香。这是一个不可能实现的目标。我是马萨·奥迪奥

If设置。你的div{max width:100%；overflow-x:scroll；}不起作用。如果你能组合一个JS提琴，这样我们就可以更好地理解布局和代码了。滚动条应该添加到div（以便顶部组件始终可见）还是添加到页面？添加到div，而不是页面。将得到一个JSFIDLEexample@vondip我们的答案对你有用吗？还不知道。明天我将更新我的发现：）