我使用 Tailwinds 来设计有角度的应用程序。结构很简单:app.component.html显示导航栏和页脚,组件通过overflow-y显示在剩余可用空间中。
问题:我的组件没有使用 w-full 或 flex-grow 占用所有可用的剩余空间。
app.component.html:
<div class="flex flex-col h-screen w-screen">
<app-topbar></app-topbar>
<div class="flex flex-grow overflow-y-auto mx-6 mt-6 bg-red-700">
<router-outlet></router-outlet>
</div>
<app-footer/>
</div>
collection.component.html
<div class="flex h-full w-full bg-amber-400">
<form [formGroup]="searchForm" *ngIf="(currentBreakpoint$ | async) === Breakpoints.XSmall">
<mat-form-field appearance="outline" class="">
<mat-label>Name</mat-label>
<input matInput placeholder="" [value]="searchForm.value.name" formControlName="name">
</mat-form-field>
</form>
<button mat-raised-button color="primary" (click)="search()" [disabled]="searchForm.invalid">Rechercher</button>
</div>
这里黄色部分代表collection.component.html并且应该占据所有可用宽度。如果这是因为父宽度未定义,我不知道该怎么做,因为我无法访问标签
您有以下代码包装了应用程序的
router-outlet
,它是 flex
。它还应该有 w-full
,它将解决您的问题。
<div class="flex flex-grow overflow-y-auto mx-6 mt-6 bg-red-700">
<router-outlet></router-outlet>
</div>