Question

现在我有以下结构：

enter image description here

当浏览器重新调整大小导致容器高度降低时，我只希望列表（#content）具有overflow-y:auto，如下所示：

enter image description here

但截至目前，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>

这是一个有问题的JS小提琴： http://jsfiddle.net/DeH2F/6/

Answer 1

希望它会帮助你

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

Answer 2

删除#container中的max-height

Answer 3

不同的屏幕分辨率可能会因您的视口而异。

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

当您在其他具有96dpi的系统中观看相同的图像时，可以在当前屏幕分辨率下将相同的图像放入10 - 20份。

在这些情况下，您必须遵循一些案例来实现这一目标。

案例1：您必须从屏幕分辨率中读取当前dpi并计算实际屏幕分辨率并使用该分辨率。这是实现这一目标的无限期方式。

案例2：停止以％'gs给出宽度..这根本不是实现目标的好方法。

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

我希望这对您有所帮助..有关css中媒体查询的更多详细信息，请点击此链接

Media Queries

Answer 4

尝试添加此

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

溢出：仅自动调整容器上的某个div

4 个答案: