生成表對話框內容滾動

我有一個建立這樣的對話：生成表對話框內容滾動

<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>

眼下，對話框的內容過長的頁面，因爲該位置是固定的，用戶永遠不能向下滾動到對話框的底部。我希望只有當內容的長度超過視口區域時才能滾動內表 - 但我總是希望頁眉和頁腳可見。

Here is a code sample.我該如何做到這一點？

來源

2016-07-07 CC Inc

你想讓模態始終保持100％的高度嗎？頁眉和頁腳固定高度？ – Stickers

@Pangloss模式只能與其中的內容一樣高，但如果內容不適合放在一個頁面中，則該內容應該可滾動。是的，頁眉和頁腳是固定的高度，但模式內容取決於服務器。 –

如果你沒事使用vh單位，你可能會迫使modal-body滾動：

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

如果你不想使用vh單位，那麼你可能需要以編程方式切換的溢出body當模態出現時。您可能還想在更改溢出時手動設置scrollTop位置，以避免頁面跳轉。

來源

2016-07-07 17:01:49 Quantastical

嗨！這個答案很好，但我會等着看看其他人是否有任何想法 - 讓'calc'和'vh'批准使用會是一件痛苦的事情。 –

我可以理解'vh'單位，這就是我指出的原因。 'calc'支持相當廣泛，但是我猜你需要IE9或更低版本才能發表評論。如果您希望使用這種優雅的回退功能，您可以非常輕鬆地使用JavaScript來計算適當的最大高度，並設置每當打開模式或調整瀏覽器大小/方向時。 – Quantastical

生成表對話框內容滾動

回答

相關問題