使浮动 div 不会超出屏幕 - 改为激活滚动条答案

【问题标题】：Make floating div not grow beyond screen - activate scroll bar instead使浮动 div 不会超出屏幕 - 改为激活滚动条
【发布时间】：2014-08-19 16:03:20
【问题描述】：

我的网上商店有一个购物车 div，当您向下滚动时它会粘在屏幕上。我正在使用此页面中的解决方案 - 投票最多的答案，而不是接受的答案： How can I make a div stick to the top of the screen once it's been scrolled to?

当访问者添加许多商品时，购物车会变得比浏览器窗口高，并且有些商品会在浏览器下方消失。我想用overflow-y:scroll给div添加滚动条，但是问题是，即使div比屏幕高，浏览器仍然认为用户可以看到整个div，所以滚动条没有'未启用。

我能否以某种方式让 div 明白它不应该超出屏幕，而是激活滚动条？

谢谢！

【问题讨论】：

标签： html scrollbar screen-size

【解决方案1】：

您可以将 max-height 与基于屏幕高度的媒体查询结合使用吗？

【讨论】：

【解决方案2】：

据我了解 max-height 将适用于这种模块。

查看http://jsfiddle.net/kundansankhe/mch22264/1/

html, body {
            height:100%;
    }
.test {
            position:fixed;
            top:0;
            overflow-y:auto;
            border:1px solid red;
            width:150px;
            max-height:100%;
        }

要占用滚动条空间，可以使用overflow-y:scroll，这样会占用滚动条空间，当内容大于屏幕高度时启用。

检查更新链接http://jsfiddle.net/kundansankhe/mch22264/1/

【讨论】：

非常聪明，100% 使用身体高度！我们已经非常接近我想要的，但问题如下：滚动条仅在 div 粘在屏幕上时出现 - 在此之前，滚动条被禁用。
开启滚动条，可以使用overflow-y:scroll，这样会占用滚动条空间，当内容超过屏幕高度时开启。