Safariが見える高さ

Question

を超えてコンテンツを表示していない、私はテーブルの下に下の境界やその他のコンテンツがレンダリングされていないことを観察した（しかし、彼らはDOMです）。 Only可視の高さのコンテンツがレンダリングされます。私はテーブルの下の空きスペースをクリックすると、残りの部分が現れました。理由は何か。

<div class="mdl-cell mdl-cell--12-col"> 
    {{#light-table table class="mdl-data-table mdl-js-data-table" height='75vh' totalWidth=1200 as |t|}} 
     {{t.head class="tableGrid" fixed=true}} 
     {{#t.body multiSelect=true as |body|}} {{/t.body}} 
    {{/light-table}} 
</div> 

私はテーブルの周りにラッパーでoverflow:scrollを追加しようとしました。それはうまくいかなかった。これはサファリでのみ発生しています

Answer 1

固定高さとオーバーフローをラッパーに載せてみてください。テーブルはスクロールしない/オーバーフローで動作するので、必要なスクロールの動作と固定された高さを含む要素にテーブルをラップする必要があります。

<div style="height: 100px; overflow: auto"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <p> 
 
      test 
 
     </p> 
 
     <p> 
 
      test 
 
     </p> 
 
     <p> 
 
      test 
 
     </p> 
 
     <p> 
 
      test 
 
     </p> 
 
     <p> 
 
      test 
 
     </p> 
 
     <p> 
 
      test 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>