Модальный с процентной высотой и минимальной высотой

Question

Я пытаюсь создать модальное диалоговое окно, высота которого будет составлять процент от высоты окна браузера. Модаль должен иметь минимальную высоту, так что он не может стать невероятно малым и должен соответственно увеличиваться/уменьшаться/перестраиваться по мере изменения размера окна. Модальный имеет заголовок и нижний колонтитул, который сэндвич содержит контент модального тела.

Вот что я придумал до сих пор. Если я изменил размер окна по вертикали, красный ящик будет расти правильно и останется центрированным. Тем не менее, область содержимого и нижний колонтитул, похоже, не заполняются вплоть до нижней части модального контейнера (красная рамка).

Что здесь происходит, и как я могу это исправить?

- - FIDDLE HERE - -

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) 
    }) 
}); 

Answer 1

Любопытного взломано вверх, но я сделал это с комбинацией overflow:hidden, position:fixed, несколько position:absolute с и некоторыми другими случайными правками. Это должно заставить вас идти.

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

Answer 2

Я действительно не получил на это, но смотреть this update.

Просто установите нижний колонтитул bottom:0 и измените размер кузова.

Answer 3

Вы не правильно размещаете свои внутренние коробки.

Я объясняю: Один из боксов установлен на 50%, остальные 2 установлены на то, что им нужно. 50% осталось для заголовка & нижний колонтитул. когда его много, а другого нет.

Таким образом, установите эти два на 25%;

Кроме того, у вас есть defaut margin на 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; 
} 

Обратите внимание, что это хорошая идея, чтобы установить мин-высоту .mobal :)