Html 溢出：仅自动调整容器大小上的某些div

现在我有以下结构：

当浏览器重新调整大小导致容器高度降低时，我只希望列表（#内容）具有

overflow-y:auto

，如下所示：

但到目前为止，div会调整大小，但内容不会发送，它会保持原样，并在重新调整大小时流出容器

代码如下：

        body,html{
            height:100%;
        }
        #container{
            font-size:1em;
            background-color:#ffffff;
            max-height:60%;
            max-width:25%;
            min-height:10%;
            margin-left:5%;
            margin-top:5%;
            margin-bottom:5%;
            padding:.5%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border-color:#000000;
            border-width:5px;
            -webkit-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);

        }
        #content{
            overflow-y:auto;
        }

这是：

        <div id="container">
            <span id="logo">
                <img alt="logoImg" src="logo2.gif">
            </span>
            <div>
            <h4>Some Awesome Recipie</h4>
            <ol class="content">
            <li>Chocolate</li>
            <li>Bananas</li>
            <li>Quuie</li>
            <li>Rasa Berries</li>
            <li>Biscotie</li>
            <li>Juliette Brownies</li>
            <li>Red Apple</li>
            <li>More Chocolate</li>
            </ol>
            <span id="tip">
            Other extras can be: Sprinkes, almonds, anything sweet.
            </span> 
            <a href="#" class="downloadLink">Download</a>
            </div>
        </div>

一些很棒的接受者
巧克力
香蕉
奎伊
树莓
比斯科蒂
朱丽叶·布朗尼
红苹果
再来点巧克力
其他额外的可以是：雪碧，杏仁，任何甜的东西。

下面是问题的一个有效解决方法： 希望它能帮助你

  #content{
  height:100%;
   max-height:auto !important;
        overflow-y:auto;
    }

---

删除#容器中的最大高度

不同的屏幕分辨率可能会使您的视图端口不同

比如说,， 假设您的系统DPI（每英寸点数）为75dpi。 它只能在当前屏幕宽度中调整10个大小不同的图像

当你在其他有96dpi的系统中观看同一幅图像时，可能会在当前屏幕分辨率下将同一幅图像复制10-20份

在这些场景中，您必须遵循某些情况才能实现这一点

案例1：您必须从屏幕分辨率读取当前dpi，计算实际屏幕分辨率并使用该分辨率。这是实现这一目标的不确定方法

案例2：停止以%'gs.为单位给出宽度。。这根本不是实现目标的好办法

案例3：实现目标的最后一个明确方法是为不同的媒体查询提供单独的css

我希望这能对你有所帮助。。有关css中媒体查询的更多详细信息。。点击这个链接

尝试添加此

ol.content {
   overflow-y: auto;
   max-height: 20%;    
 }

---

这是正常的行为：您的div中有文本，因此浏览器只需放置一个滚动条来显示它。它无法调整文本大小。您是否正在寻找类似的内容-？这是因为当前屏幕的分辨率。因此，尝试对屏幕分辨率较低的媒体使用不同的css。。或者尝试使用fixed with.@NathanLee谢谢，但这正是我之前尝试过的，但它适用于整个容器。我只想将其用于

在这种情况下，请将其保存在a中，并应用相同的覆盖：自动应用于该容器，这样，容器不会随着浏览器高度的变化而调整大小谢谢。我了解媒体查询和响应性设计。但事实是，这是一个非常小的部分，必须保持最小的代码。我正在寻找一种不使用媒体查询的解决方案。