讓 bootstrap 的 modal 可以在視窗高度內

bootstrap 是很方便的 UI framework，但有些地方還是會需要做些調整比較適合使用，比如最近遇到的這個問題，如果我要把表單放在 modal 裡面，選項一多小視窗就會超過瀏覽器的高度，而且 bootstrap 預設的樣式 modal 是不會隨視窗調整大小的，這樣 modal 下半部就會沒辦法按到，要能夠在內容太長的情況下還可以使用，就需要做以下的調整。

view plaincopy to clipboardprint

1. .modal-dialog,   
2. .modal-content {   
3.     /* 90% of window height */  
4.     height: 90%;   
5. }   
6. .modal-body {   
7.     /* 100% = dialog height, 120px = header + footer */  
8.     max-height: calc(100% - 120px);   
9.     overflow-y: scroll;   
10. }  

簡單調整一下 modal 裡面的高度就好，.modal-body 的 max-height 用了 CSS3 的 calc() ，是 CSS 新增可以計算的語法，而且大多瀏覽器都有支援了，可以放心使用。