gpt4 book ai didi

html - AngularJS布局行不包含div

转载 作者:行者123 更新时间:2023-11-28 06:05:15 25 4
gpt4 key购买 nike

正文当前设置为 layout="column"我在其中有一个标题行和一个内容行。标题行工作得很好,但内容行设置为无高度,或者我将其设置为 flex,但无论哪种方式它都与标题行重叠,我希望能够将内部 div 设置为 100%剩余高度。

<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>

最佳答案

你可以使用height:calc

例如

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

你也可以这样使用它

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

假设 20px 是顶部剩余内容的高度。

关于html - AngularJS布局行不包含div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36500358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com