Question

我将父容器设置为overflow: auto; position: fixed;。它的直接子对象也是其他元素的容器。我将直接子代的高度设置为默认的height: auto。当我降低视口高度时，直接子级开始收缩，而子级元素消失了，而不是在父容器上没有滚动条。有谁知道发生了什么事以及如何解决？如果解决方案不需要固定高度，那就太好了。

<div class="parent" style="overflow: auto; position: fixed;">
  <div class="children">
    <div class="grandchildren" style="height: 30px;">Div1</div>
    <div class="grandchildren" style="height: 30px;">Div 2</div>
    <div class="grandchildren" style="height: 30px;">Div 3</div>
    <div class="grandchildren" style="height: 30px;">Div 4</div>
  </div>
</div>

JSFiddle https://jsfiddle.net/j67shi/smag4e0u/11/上的代码段

Answer 1

检查以下代码段。您需要为父级div设置高度

<div class="parent" style="overflow: auto; position: fixed;height:100%">
  <div class="children" style="overflow: hidden;">
    <div class="grandchildren">1</div>
    <div class="grandchildren">2</div>
    <div class="grandchildren">3</div>
    <div class="grandchildren">4</div>
    <div class="grandchildren">5</div>
    <div class="grandchildren">6</div>
    <div class="grandchildren">7</div>
    <div class="grandchildren">8</div>
    <div class="grandchildren">9</div>
    <div class="grandchildren">10</div>
    <div class="grandchildren">11</div>
    <div class="grandchildren">12</div>
    <div class="grandchildren">13</div>
    <div class="grandchildren">14</div>
    <div class="grandchildren">5</div>
    <div class="grandchildren">6</div>
    <div class="grandchildren">7</div>
    <div class="grandchildren">8</div>
    <div class="grandchildren">9</div>
    <div class="grandchildren">10</div>
    <div class="grandchildren">11</div>
    <div class="grandchildren">12</div>
    <div class="grandchildren">13</div>
    <div class="grandchildren">14</div>
  </div>
</div>

父容器有溢出：自动，但是子元素的高度在屏幕高度更改时仍会更改

1 个答案: