Строка раскладки AngularJS, не содержащая div

Тело в настоящее время настроено на layout = "column" У меня есть строка заголовка и строка содержимого внутри него. Строка заголовка работает очень хорошо, но строка содержимого получает значение без высоты или я устанавливаю ее на гибкость, но в любом случае она перекрывает строку заголовка, и я хочу, чтобы внутренние индексы были на 100% оставшаяся высота.Строка раскладки AngularJS, не содержащая div

<body layout="column" ng-style="bodyStyle" ng-controller="AppCtrl"> 

<div class="header" layout="row"> 
    <div class="menuButton"> 
    <a href="#"><ng-md-icon icon="menu"></ng-md-icon></a> 
    <md-tooltip>Menu</md-tooltip> 
    </div> 
</div> 

<div class="content" layout="row" style="background-color: black"> 
    <p>Random text asdf 
    <div class="sidenav" layout="column"> 
    <div> 
     <ng-md-icon icon="people"></ng-md-icon> 
     <md-tooltip>Contacts</md-tooltip> 
    </div> 
    <div class="active"> 
     <a href="#"><ng-md-icon icon="message"></ng-md-icon></a> 
     <md-tooltip>Conversations</md-tooltip> 
    </div> 
    <div> 
     <a href="#"><ng-md-icon icon="phone"></ng-md-icon></a> 
     <md-tooltip>Phone Calls</md-tooltip> 
    </div> 
    <div> 
     <a href="#"><ng-md-icon icon="more_horiz"></ng-md-icon></a> 
     <md-tooltip>More</md-tooltip> 
    </div> 
    </div> 
    <div class="likeThis!">I want to be 100% of the remaining height</div> 
</div> 
</body>

источник

2016-04-08 CaptainOfTheSky

и можно использовать height:calc

например,

.full-height { 
height: calc(100%) 
}

вы также можете использовать его как

.full-height { 
    height: calc(100% - 20px) 
    }

предполагая 20px является высота оставшегося материала, который находится в верхней части.

источник

2016-04-08 13:13:18

Спасибо, я думаю, что это по существу то, что делает flex. Я пробовал и то, и другое, но внутренние div все еще распространяются дальше – CaptainOfTheSky

Строка раскладки AngularJS, не содержащая div

ответ

Смежные вопросы