CSS：调整浏览器大小（缩小）时垂直滚动条消失答案

【问题标题】：CSS: vertical scrollbar disappears when browser is resized (narrowed)CSS：调整浏览器大小（缩小）时垂直滚动条消失
【发布时间】：2016-11-27 12:10:46
【问题描述】：

是什么导致这种情况发生？无论浏览器窗口有多窄，我都希望垂直滚动条出现。网格中的内容是动态的，但这个问题似乎与网格中的行数无关。滚动条在浏览器窗口达到一定大小时出现，并在窗口变宽时保留，但在窗口变窄时消失。高度是动态的，由元素通过 JavaScript 设置为样式属性。

<div id="mycontainer" class="mydiv" style="height: 142px;"></div>
<style>
    .mydiv {    
        background-color: white;     
        border-color: #d8d8d8;    
        border-style: solid;    
        border-width: 0 1px 1px;    
        height: 100%;
        width: 100%    
        margin: 0;    
        overflow-y: auto;    
        padding: 0;    
        position: relative;    
    }
</style>

【问题讨论】：

没有看到你的javascript我不能肯定地说。但是在 JSFiddle 中，border-width-property 将 1px 添加到 div 的底部，这使其 100% + 1px 高。如果溢出设置为自动，这肯定会触发 scollbar。您可以通过将 box-sizing 设置为 border-box 来解决此问题。这应该适用于任何浏览器：caniuse.com/#search=box-sizing
仅使用您提供的代码无法重现您的问题。

标签： javascript css

【解决方案1】：

啊，情况是你正在使用overflow-y，这会阻止div显示滚动条，而且你在div中没有内容，也许你可以与div和内容共享一个plnkr？

【讨论】：

overflow-y: auto 表示：仅在需要时显示垂直滚动条
准确地说，现在它不需要，因为没有内容，这就是我推荐创建 Plnkr 的原因。
但我改变的是浏览器窗口的宽度，而不是高度。所以网格中的行数保持不变，即使浏览器变窄或变宽，我也需要垂直滚动条来查看所有行。
你可以试试：width: 100%;
另外你通过在 div 上放置内联样式来覆盖规则，你声明属性 height 两次。