web-dev-qa-db-ja.com

モーダルの高さを制限する方法は？

私は、画面の境界内にモーダルダイアログを保持する方法を探しています、つまり、その高さは常に画面の高さよりも小さく、それに応じて幅が調整されます。私は試した：

.modal-dialog {
  max-height: 100%;
}

しかし、これは効果がないようです。

http://jsfiddle.net/ma4zn5gv/

イラスト：

enter image description here

存在する場合、純粋なCSSソリューション（jsなし）を好みます。明確にするために、私は高さではなく最大高さを探しています（つまり、モーダルは画面よりも高くないので、そのままにしておきます）。

csstwitter-bootstrap-3responsive-design
28
georg

viewport units とともにcalcを使用します。このような：

.img-responsive {
    max-height: calc(100vh - 225px);
}

...ここで、225pxは、ダイアログを囲むビューポートの上部と下部の合計の高さに対応します。

また、モーダルの幅を処理するには、さらにいくつかのプロパティを設定する必要があります。

.modal {
    text-align:center;
}
.modal-dialog {
    display: inline-block;
    width: auto;
}

更新されたフィドル （ビューポートの高さを変更して効果を確認します）

代わりに：

calcを、次のようなパディング+負のマージン技術で置き換えることができます。

.img-responsive {
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;
}

[〜＃〜] fiddle [〜＃〜]

PS：ブラウザのビューポートユニットのサポートは 非常に良い

55
Danield

デフォルト値はautoに設定されているため、幅と高さは100％です。変更することができます。次のように、ビューポート内の画像とターゲットID：

/*let target has the same value as modal-dialog*/
#myModal {
    width:auto;
    height:auto;
    margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
    width:70%;
    height:70%;
    margin:0 auto;
}

Jsfiddleの[〜＃〜] demo [〜＃〜]は次のとおりです。

また、次のように分割することもできます。

.modal-dialog img {
    width:100%;
    height:100%;
    margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
    width:60%;
    height:60%;
    margin:0 auto;
}

更新済み[〜＃〜] demo [〜＃〜]：

3
Herman Nz

親要素に高さが設定されていることを確認したら、かなり簡単にできるはずです。ヘッダーとフッターの高さは10％、本体の高さは80％であるため、合計で100になります:)

.modal, .modal-dialog, .modal-content{
  height: 100%;

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}
2
Achilles

スクリプト

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});

フィドル

2
Richie Fredicson

フィドルいくつかのcss変更を加えてみてください。

css：

.modal-dialog {
 height: 100%;
 margin: 0;
 padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
1
Amit

Max-heightとmax-widthを100％に設定すると、それに応じて自動的に画面が表示されますが、このダイアログサイズを小さくするには、max-heightとmax-widthを一定の値に設定する必要があります。すでにレスポンシブモデルダイアログを使用しているため、画面サイズに応じてダイアログサイズが自動的に変更されます。

要件に応じて機能するcssを試してください。それに応じてmax-heightとmax-widthを変更できます。margin-leftとmargin-rightは中央揃えに使用されます。

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

お役に立てば幸いです。！

1
Ranjitsinh

modal-bodyではなく、modal-dialogをターゲットにします。

以下をCSSに追加します。

max-height: 80vh;
overflow-y: auto;

次のようになります。

.modal-body {
    max-height: 80vh; overflow-y: auto;
}

VHの高さを好みに合わせて調整します。

1
Juan J

最初にコンテナサイズを修正してから、モーダルダイアログサイズを設定します。

例えば：

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

フィドル

1
Kanti

Overflow：.modal-dialogに隠された、画像の割合を維持するスタイルを使用する必要があると思います。

0
David Vartanian