私は現在取り組んでいるプロジェクトに Twitter Bootstrap を使用しています。
やや長めのフォームを含むモーダル ウィンドウがあり、ウィンドウが小さくなりすぎるとモーダルがスクロールしない (スクロールできないページから消えてしまう) のが気に入りませんでした。
これを修正するために、次のCSSを使用しました
.modal {
overflow-y:auto;
max-height:90%;
margin-top:-45%;
}
これは Chrome ではまさに私が望んでいるとおりに動作します (つまり、ウィンドウが十分に大きいときはフォームはフルサイズですが、ウィンドウが縮小するとモーダルも縮小してスクロール可能になります)。問題は、IE ではモーダルが画面外にあることです。この問題のより良い解決策をお持ちの方はいらっしゃいますか?
私の例は tinyhousemap.com で見つかります (モーダルを表示するには、ナビゲーション ウィンドウの [マップにエントリを追加] をクリックしてください)
ありがとう
ベストアンサー1
以下の解決策はどうでしょうか? 私の場合はうまくいきました。これを試してみてください:
.modal .modal-body {
max-height: 420px;
overflow-y: auto;
}
詳細:
overflow-y: auto;
.modal クラスからまたはを削除しますoverflow: auto;
(重要)max-height: 400px;
クラスから削除する.modal
(重要)- .modal に .modal-bodyを追加します
max-height: 400px;
(または 未満でも構い420px
ませんが を超えることはできません450px
) overflow-y: auto;
に追加.modal .modal-body
完了です。本文のみがスクロールします。