我有CSS:
@media (max-width: 480px) {
#creating_products {
max-height: 400px;
overflow-y: scroll;
}
}
HTML:
<div id="creating_products">
<div id="product_fields">
<ul id="sortable_invoice_products">
{section name=foo start=1 loop=11 step=1}
<div class="invoice_margin_template"></div>
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent">
........
</div>
</li>
{/section}
</ul>
</div>
</div>
当我在Android上测试此代码时,部分&#34; creating_products&#34; div被隐藏了,但我的滚动条没有出现。我该如何解决这个问题?
答案 0 :(得分:0)
也许你的HTML被破坏了,桌面浏览器正在动态修复它?
尝试删除<div class="invoice_margin_template"></div>
标记内的<ul>
,并确保<li>
内的html有效
body{
background: red;
}
@media (max-width: 480px) {
#creating_products {
max-height: 100px;
overflow-y: scroll;
}
}
<div id="creating_products">
<div id="product_fields">
<ul id="sortable_invoice_products">
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li>
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li>
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li><li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li>
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li>
<li class="ui-sortable-handle invoice_sortable">
<div class="product_fields_parent"></div>
some content
</li>
</ul>
</div>
</div>
答案 1 :(得分:0)
首先,当您想要滚动某个区域时,主要会显示滚动。看看文字是不是从下来切割。再次触摸该区域并尝试向上滚动。这是因为在android滚动中没有显示何时实现了CSS overflow
。
其次,使用height
代替max-height
。试试这个,看看它是否对你有帮助。有时max-height
无效。
您还要添加overflow-x:hidden;
愿这些简单的改变对你有用。
由于