Как сделать div расширяться только снизу вниз

Question

У меня есть div в модальном ниже. Проблема, с которой я столкнулась, - это когда я нажимаю Add Row, это создает еще один div с строкой и расширяет верхнюю и нижнюю. После того, как добавлено несколько строк, div отключится от экрана. Смотрите скриншоты. Примечание: элемент строки запроса является угловой директивой, поэтому вы не видите шаблон для него (который включает в себя фактические поля и добавляет строку). Но в этом случае это не имеет значения.

HTML

<div class="ng-modal ng-cloak" ng-show="true"> 
    <div class="ng-modal-overlay"> 
     <div class="ng-modal-close"> 
      <div class="ng-modal-close-x">CLOSE</div> 
     </div> 
     <div class="ng-modal-dialog"> 
      <div class="ng-modal-dialog-content"> 
       <div class="document-content-wrapper"> 
        <div class="document-content"> 
         <div ng-repeat="row in rows"> 
          <query-row rows="rows" remove-row="removeRow(row)" add-row="addRow()"></query-row> 
         </div> 
         <div class="row"> 
          <button ng-click="submit()" class="btn btn-primary">Submit</button> 
          <button ng-click="cancel()" class="btn btn-info">Cancel</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.ng-modal { 
    position: fixed; 
    z-index: 9999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.ng-modal-overlay { 
    position: absolute; 
    z-index: 9999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #282828; 
    opacity: 0.9; 
} 
.ng-modal-dialog { 
    z-index: 10000; 
    position: absolute; 
    top: 164px; 
    left: 53%; 
    width: 800px; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    padding: 10px; 
    background-color:#FFF; 

} 
.ng-modal-dialog-content { 
    overflow: hidden; 
    height: 100%; 
} 

.ng-modal-dialog-input { 
    margin: 0px; 
    padding: 5px; 
    font-size: 36px; 
    width: 100%; 
    border: none; 
    background-color: #fff; 
    outline: 0; 
    color: #000; 
    font-weight:700; 

} 

.ng-modal-close { 
    position: absolute; 
    top: 15px; 
    right: 28px; 

} 
.ng-modal-close-x { 
    font-family: Arial, sans-serif; 
    display: inline-block; 
    cursor: pointer; 
    float: right; 
    font-size: 18px; 
    color: #fff; 
} 
.ng-modal-title { 
    font-weight: bold; 
    font-size: 200%; 
    display: block; 
    margin-bottom: 10px; 
    padding-bottom: 7px; 
    border-bottom: solid 1px #999; 
} 

Plunker Пример: http://plnkr.co/edit/RFNsrC

Первый кадр просто с одной строкой. Screenshot 1 На втором снимке экрана добавлены 3 строки, и вы можете увидеть, как модальный экран отключается сверху. Я хочу, чтобы он оставался фиксированным сверху и расти только до самого конца. Screenshot 2

Answer 1

Вот код, проблема в том, где вы пытаетесь создать новую строку, она выше не ниже, попробуйте положить в таблицу. http://codepen.io/calendee/pen/buCHf

<a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a> 

<table> 
    <thead> 
    <tr> 
    <th width="200">Some Header</th> 
</tr> 
</thead> 
    <tbody> 
    <tr ng-repeat="rowContent in rows"> 
     <td>{{rowContent}}</td> 
    </tr> 
    </tbody> 
    </table>  

И установить CSS в .ng-модальной-диалог следующим образом:

height:900px; 
overflow-x: auto; 

Позвольте мне знать, если это работает :)