Макет 80% дисплея: таблица

Question

Я пытаюсь сделать модальное всплывающее окно [с центром, положение: исправлено], центральная часть которого (#scroller) имеет минимальную высоту 600 пикселей и максимальную высоту 80% от высоты экран.

Пробуя все обычные трюки, я все равно никуда не денусь.

Он отлично работает на минимальной высоте, но не на максимальной высоте.

Нет сомнения в другом вопросе, но я читал десятки и нигде не получил.

http://jsfiddle.net/2Ders/1/

<div class='modal'> 
    <form action='../dataHandler.php'> 
     <figure> 
      <h5>Header</h5> 
      <div id='scroller'></div> 
      <p class='after'>PostContent</p> 
     </figure> 
    </form> 
</div> 


<style> 
html{height:100%;} 
body{min-height:100%} 

.modal{ 
    display: table; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    table-layout: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 7; 
    background-color:rgba(100,100,100,0.5); 
    text-align:center; 
    } 
form { 
    display: table-cell; 
    vertical-align: middle; 
    } 
figure{ 
    background-color: #FFFFFF; 
    border: 10px solid #888888; 
    box-shadow: 0 1px 0 #2AB7EC inset, 0 2px 0 0 #156785, 0 5px 3px #999999; 
    display: inline-block; 
    font-size: 14px; 
    margin: auto; 
    min-height: 150px; 
    min-width: 600px; 
    position: relative; 
    text-align: justify; 
    } 
#scroller{ 
    font-size: 14px; 
    text-align: justify; 
    max-height:80%; 
    overflow:auto; 
    } 
</style> 

Answer 1

Существует гораздо более простой способ установки модальности: http://jsfiddle.net/hT5dx/1/

HTML:

<div class='modal_shadow'> 
    <div class='modal' > 
     <div class='modal_content' > 
      <h2>title</h2> 
      <p> 
       Bacon ipsum dolor ... 
      </p> 
     </div> 
    </div> 
</div> 

CSS:

.modal_shadow { 
    position: fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background: rgba(80,80,80,0.5); 
} 

.modal { 
    width:80%; 
    margin:0 auto; 
    max-height: 80%; 
    outline: 1px solid red; 
    overflow:auto; 

    /* vertical center */ 
    -moz-transform: translate(0px, 50px); 
    -webkit-transform: translate(0px, 50px); 
    -o-transform: translate(0px, 50px); 
    -ms-transform: translate(0px, 50px); 
    transform: translate(0px, 50px); 
} 

Вы можете адаптировать этот код к себе.