4

私は多くのモーダルでアプリを構築し、そのようなもののためにモーダルを設定する必要があります：

.modal {トップ：5％; 左：5％; 右：5％; 下：5％; }

したがって、ブラウザウィンドウの幅が90％、高さが90％になります。しかし、スクロール可能なモーダルボディが必要です。私はモーダルヘッダーを使用していますが、機能的なボタンが含まれているため、常に表示する必要があります。

max-heightを定義したい場合、パーセンテージで表示されていても、正しい数値ではありません。たとえば、ヘッダーの幅は5％に設定されていますが、パディングは5pxで、下の境界線は1pxに定義されているため、カウントできません。これらを一緒に。オーバーフローを定義するには、max-widthまたはwidthを定義する必要がありますが、それを動的に知る方法がなく、パーセンテージが適合しません。

解決策が見つからないため、長いモーダルでスクロールするとヘッダーがスクロールアウトするにもかかわらず、長いスクロール可能なモーダルについて考え始めました。

私が欲しいものを手に入れる方法はありますか？

4

1 に答える 1

5

このCSSを試すことができます：

.modal{
  width: 90%; /* desired relative width */
  min-height:80%;
  left: 5%; /* (100%-width)/2 */
  margin: auto auto auto auto; /* place center */}

.modal-body{overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;}

.modal-footer {position: absolute;bottom: 0;right: 0;left: 0;}

ここに例があります

それがうまくいったかどうか教えてください=）

于 2013-03-22T20:46:04.223 に答える