Question

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

Answer 1

也许你的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>

Answer 2

首先，当您想要滚动某个区域时，主要会显示滚动。看看文字是不是从下来切割。再次触摸该区域并尝试向上滚动。这是因为在android滚动中没有显示何时实现了CSS overflow。

其次，使用height代替max-height。试试这个，看看它是否对你有帮助。有时max-height无效。

您还要添加overflow-x:hidden;

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

由于

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

2 个答案: