css - 如何将 overflow-y 设置为 100% 高度的容器

标签 css height overflow containers

html,body{
    height:100%;
    margin:0;
}
#container{
    height:100%;
    background:red;
}
body>#container{
    height: auto;
    min-height: 100%;
}

我用这些 css 属性设置了一个容器以获得 100% 的高度并且它起作用了。
现在我在 #container 中有很多 div,如下所示:

<div id="container">
    <div class="myClass"></div>
    <div class="myClass"></div>
    <div class="myClass"></div>
    etc.....
</div>

所以我将 overflow-y:auto; 应用到 #container 以在它们太多时滚动它们,但它们会离开容器而不显示滚动条。 .. 我已经读过其他关于“100% 高度容器和溢出”的帖子,但不是我的情况……有什么解决办法吗?

谢谢

最佳答案

这就是你想要的,我自己也不知道遇到过多少次这样的问题。确保在 <html> 上设置 100% 宽度然后min-heightbody , 和 #container .

   html {
      height:100%;
    }

    body {
      min-height:100%;
    }

    #container {
     min-height:100%;
    }

关于css - 如何将 overflow-y 设置为 100% 高度的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21175887/

相关文章:

html -::ms-thumb 伪元素拖动后的行为

html - 为要显示的图像创建一个流畅的 3 列布局

html - 最小高度 100% 对内部 div 不起作用

html - 水平滚动CSS?

css - 你如何获得一个 div 来隐藏/滚动溢出并以一致的边距缩放到视口(viewport)?

CSS 在溢出时没有悬停

javascript - 使图像在较小的显示器上不以全分辨率加载

javascript - 扩展 flexbox div,以便在我附加 div 时它可以扩展

C# - 设置 ComboBox 的高度

css - 我可以动态调整 css 设置的 div 边框的高度吗?