为什么在手机上没有溢出?

时间:2018-03-20 13:42:26

标签: android css html5 mobile

我有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被隐藏了,但我的滚动条没有出现。我该如何解决这个问题?

2 个答案:

答案 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;

愿这些简单的改变对你有用。

由于