我一直在搜索和搜索大约3个小时,因为我不想要问,但我怎么能在底部保留一个“页脚”变量,而不是像固定在底部,所以如果我的内容是非常小,它不会只是坐在页面中间,但如果我有很多信息,它将不会锁定在页面的底部,并在滚动时坐在那里数据
我尝试了几种方法,包括:
https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html
大多数与此相关的问题我已经测试过,或者似乎没有工作或者根本没有工作.
继承我目前的代码:
<div class="content"> <app-navbar></app-navbar> <app-footer></app-footer> </div>
和< app-content>< / app-content>在导航栏内,因为导航栏控制整页sidenav.
整个app-navbar看起来像这样:
<mat-sidenav-container fullscreen> <mat-sidenav mode="push" #sidenav> <div fxLayout="column"> <mat-toolbar fxLayoutAlign="center center" color="primary"> <button mat-icon-button routerLink="/home" (click)="sidenav.close()"> <mat-icon>keyboard_backspace</mat-icon> </button> </mat-toolbar> <button mat-button routerLink="/dashboard" (click)="sidenav.close()" >information</button> <button mat-button routerLink="/second" (click)="sidenav.close()" >Web tools</button> </div> </mat-sidenav> <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10"> <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-xs> <mat-icon>menu</mat-icon> </button> <div fxLayout="row"> <button fxLayout="flex-shrink: 0;" mat-button class="title" style="font-size: 25px;">{{this.title}}</button> <button fxShow="false" fxShow.gt-xs mat-button routerLink="/dashboard" [matMenuTriggerFor]="infoMenu">information</button> <button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">Web tools</button> </div> <!-- fxFlex will fill the empty space and push the following items to the right --> <div fxFlex></div> <button mat-icon-button> <mat-icon>face</mat-icon> </button> </mat-toolbar> <app-container></app-container> </mat-sidenav-container>
页脚只是一个超级基本组件,如下所示:
<mat-toolbar> <div class="container"> <span>this is a toolbar</span> </div> </mat-toolbar>
到目前为止,只有样式的应用是这样的:
@import url('https://fonts.googleapis.com/css?family=Comfortaa'); .title { font-family: "Comfortaa"; } html,body { height: 100%; margin: 0; } .content { min-height: 100%; }
这是在全局style.css文件中.
解决方法
使用FlexBox的方法:
当我们使用FlexBox时,我们可以获得更清洁的解决方案.此外,我的解决方案将涵盖页面的第一个组件应占用高度的100%.这通常需要适当地定位元素或使用背景.代码与Material 2的当前版本匹配 – 在撰写本文时,它是2.0.0-beta.12.
标记:
<mat-sidenav-container class="all-wrap" fullscreen> <mat-sidenav #sidenav> <mat-list> <mat-list-item [routerLink]="['/']"> Foo</mat-list-item> <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item> </mat-list> </mat-sidenav> <div class="page-wrap"> <header role="banner"> <mat-toolbar color="primary"> <button type="button" mat-icon-button (click)="sidenav.open()" title="Open sidenav"> <mat-icon>menu</mat-icon> </button> Your Toolbar </mat-toolbar> </header> <main class="content"> <router-outlet></router-outlet> </main> <footer> Your sticky footer with a variable height. </footer> </div> </mat-sidenav-container>
样式:
/* * Actual Sticky Footer Styles */ .all-wrap { min-height: 100vh; } .page-wrap { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; } /* * Make the Component injected by Router Outlet full height: */ main { display: flex; flex-direction: column; > *:not(router-outlet) { flex: 1; display: block; } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。