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

时间:2013-11-19 09:26:50

标签: html css html5 css3 responsive-design

现在我有以下结构:

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/

4 个答案:

答案 0 :(得分:0)

希望它会帮助你

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

答案 1 :(得分:0)

删除#container中的max-height

答案 2 :(得分:0)

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

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

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

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

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

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

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

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

Media Queries

Media Queries

答案 3 :(得分:0)

尝试添加此

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