0

高さがブラウザ ウィンドウの高さのパーセンテージになるモーダル ダイアログを作成しようとしています。モーダルには最小の高さを持たせて、ありえないほど小さくならないようにし、ウィンドウのサイズが変更されるとそれに応じて拡大/縮小/再中央揃えする必要があります。モーダルには、モーダル本体のコンテンツを挟むヘッダーとフッターがあります。

これが私がこれまでに思いついたものです。ウィンドウを垂直方向にサイズ変更すると、赤いボックスが正しく拡大され、中央に配置されたままになります。ただし、コンテンツ エリアとフッターは、モーダル コンテナー (赤いボックス) の一番下まで埋まっていないようです。

ここに画像の説明を入力

ここで何が起こっていて、どうすれば修正できますか?

- - ここでフィドル - -

HTML:

<div class="modal">
    <div class="modal-header">Header</div>
    <div class="modal-body">
        [...words...]
    </div>
    <div class="modal-footer">Footer</div>
</div>

CSS:

.modal {
    border:1px solid red;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
}

.modal-header, .modal-body, .modal-footer {
    padding:10px;
}

.modal-header, .modal-footer {
    background:#ccc;
    font-weight:bold;
    font-size:14px;
}

.modal-body {
    height:inherit;
    overflow:auto;
    line-height:1.75em;
}

jQuery:

$(function() {
    $('.modal').css('height','50%');
    $('.modal').css( {
        'margin-top': (-1*$('.modal').height()/2),
        'margin-left': (-1*$('.modal').width()/2)
    })
});

$(window).resize(function() {
    $('.modal').css( {
        'margin-top': (-1*$('.modal').height()/2),
        'margin-left': (-1*$('.modal').width()/2)
    })
});
4

3 に答える 3

2

ちょっとハックアップしましたが、いくつかのoverflow:hidden、 、およびその他のランダムな編集を組み合わせて作成しました。これでうまくいくはずです。position:fixedposition:absolute

http://jsfiddle.net/d3Ym2/6/

于 2013-06-03T20:03:27.950 に答える
1

私はこれについてあまり理解していませんが、この更新を見てください。

フッターを設定してbottom:0、本体の高さを変更するだけです。

于 2013-06-03T20:07:52.783 に答える
0

内側のボックスのサイズが正しくありません。

私は説明します：ボックスの1つは 50% に設定され、他の2つは必要なものに設定されています. ヘッダーとフッターの残り 50%。1回は十分で、もう1回はそうではありません。

したがって、これら 2 つを 25% に設定します。

のほかに、p 要素にデフォルトのマージンがあり、ボックスから飛び出します。

ヘッダーとフッターに高さとボックスのサイズを設定すると、それらが含まれます。
CSS の再訪

* {
    font-family:Arial, sans-serif;
    font-size:12px;
}

.modal {
    border:1px solid red;
    width:600px;
    position:absolute;
    top:50%;
    left:50%;
    min-height:200px;
}

.modal-header, .modal-body, .modal-footer {
    padding:10px;
    height:25%;
    box-sizing: border-box
}

.modal-header, .modal-footer {
    background:#ccc;
    font-weight:bold;
    font-size:14px;

}

.modal-body {
    height:inherit;
    padding:1px;
    overflow:auto;
    line-height:1.75em;
}

min-height を .mobal に設定することをお勧めします:)

于 2013-06-03T20:28:50.870 に答える