现在我有以下结构:
当浏览器重新调整大小导致容器高度降低时,我只希望列表(#content)具有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>
这是一个有问题的JS小提琴: http://jsfiddle.net/DeH2F/6/
答案 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中媒体查询的更多详细信息,请点击此链接
答案 3 :(得分:0)
尝试添加此
ol.content {
overflow-y: auto;
max-height: 20%;
}