2017-01-10 4 views
0

Как заполнить столбец вертикально. В настоящее время у меня есть это приложение.Конструкция углового материала как заполнить столбец вертикально

enter image description here

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

это мой код.

<body ng-cloak layout="column" ng-app="app"> 
<div layout="row" flex> 

    <md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true"> 
     <md-list> 
      <md-list-item> 
       <md-button ng-click=""> 
        <md-icon md-font-set="material-icons">face</md-icon> 
        Alex 
       </md-button> 
      </md-list-item> 
      <md-list-item> 
       <md-button ng-click=""> 
        <md-icon md-font-set="material-icons">face</md-icon> 
        Tara 
       </md-button> 
      </md-list-item> 
     </md-list> 
    </md-sidenav> 

    <md-content flex id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque 
      dolores 
      dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe 
      sequi 
      vitae, voluptas! 
     </p> 
    </md-content> 

</div> 

Code Pen Example

Я просто заметил, что родительский DIV .app-обертка вызывает проблему, но я хочу, чтобы сохранить его.

+0

Вы можете создать плункер? – Sajeetharan

+0

@ user3862830 Вот файл plnkr https://plnkr.co/edit/T8HaQ62IlEjXUWQpJo04?p=preview, который я создал для вас, но я вижу, что он подходит ко дну, в отличие от вашей проблемы. Обновите plnkr, чтобы воспроизвести проблему. – bhantol

+0

Я добавил ручку кода – user3862830

ответ

-1

Вы ищете viewport height. В вашем случае вы можете подать заявку на md-sidenav по классу:

.full-height{ 
    height: 100vh; 
}