Make Tabellendialog Inhalt scrollbaren

Question

Ich habe einen Dialog, der so eingerichtet ist:

<div style="position:fixed; display:block; width:600px; top:0; left:50%;margin-left:-275px;"> 
    <table style="width:100%;" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
     <td> 
      <div class="modal-header"> 
      <span class="close">×</span> 
      <h2>Modal Header</h2> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td style="background-color:gray;"> 
      <table> 
      <tbody> 
       <tr> 
       <td> 
        <div class="modal-body"> 
        <p>variable length really long stuff</p> 
       </td> 
       </tr> 
      </tbody> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <div class="modal-footer"> 
      <h3>Modal Footer</h3> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Gerade jetzt, der Inhalt des Dialogs ist zu lang für die Seite, und da die Position festgelegt ist, kann der Benutzer kann niemals bis zum Ende des Dialogs herunterscrollen. Ich möchte, dass die innere Tabelle nur scrollbar ist, wenn die Länge des Inhalts den Darstellungsbereich überschreitet - aber ich möchte immer, dass die Kopf- und Fußzeile sichtbar ist.

Here is a code sample. Wie kann ich das erreichen?

Answer 1

Wenn Sie in Ordnung sind vh Einheiten verwenden, können Sie die modal-body zwingen blättern:

.modal-body { 
    padding: 2px 16px; 
    overflow:auto; 
    max-height: calc(100vh - 144px); /* 144px represents the combined height of the modal header and footer */ 
} 

Wenn Sie nicht vh Einheiten verwenden möchten, dann müssen Sie programmatisch den Überlauf auf den hin- und herzuschalten body wenn das Modal kommt. Sie können auch die Position scrollTop manuell einstellen, wenn Sie den Überlauf ändern, sodass die Seite nicht springt.