bootstrap 是很方便的 UI framework，但有些地方還是會需要做些調整比較適合使用，比如最近遇到的這個問題，如果我要把表單放在 modal 裡面，選項一多小視窗就會超過瀏覽器的高度，而且 bootstrap 預設的樣式 modal 是不會隨視窗調整大小的，這樣 modal 下半部就會沒辦法按到，要能夠在內容太長的情況下還可以使用，就需要做以下的調整。
簡單調整一下 modal 裡面的高度就好，.modal-body 的 max-height 用了 CSS3 的 calc() ，是 CSS 新增可以計算的語法，而且大多瀏覽器都有支援了，可以放心使用。
- .modal-dialog,
- .modal-content {
- /* 90% of window height */
- height: 90%;
- }
- .modal-body {
- /* 100% = dialog height, 120px = header + footer */
- max-height: calc(100% - 120px);
- overflow-y: scroll;
- }
簡單調整一下 modal 裡面的高度就好，.modal-body 的 max-height 用了 CSS3 的 calc() ，是 CSS 新增可以計算的語法，而且大多瀏覽器都有支援了，可以放心使用。
留言