Angular 2 Material 中的粘性页脚
[英] Sticky footer in Angular 2 Material
本文介绍了Angular 2 Material 中的粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经搜索和搜索了大约 3 个小时，因为我不想问，但是如何在底部保留一个页脚"变量而不像在底部固定，所以如果内容我的尺寸非常小，它不会只是位于页面的一半，但是如果我有很多信息，它就不会锁定在页面底部并在滚动时坐在数据上
我尝试了多种方法，包括:https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html与此相关的大多数问题我都测试过，但都失败了，或者似乎根本不起作用.
这是我当前的代码:
<app-navbar></app-navbar><app-footer></app-footer>
并且
整个应用导航栏看起来像这样:
<mat-sidenav mode="push" #sidenav><div fxLayout="列"><mat-toolbar fxLayoutAlign="center center" color="primary"><button mat-icon-button routerLink="/home" (click)="sidenav.close()"><mat-icon>keyboard_backspace</mat-icon></mat-toolbar><button mat-button routerLink="/dashboard" (click)="sidenav.close()" >信息</button><button mat-button routerLink="/second" (click)="sidenav.close()" >网络工具</button>
</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>菜单</mat-icon><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">信息</button><button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">网络工具</button>
<!-- fxFlex 将填充空白区域并将以下项目向右推--><div fxFlex></div><按钮垫图标按钮><mat-icon>face</mat-icon></mat-toolbar><app-container></app-container></mat-sidenav-container>
页脚只是一个看起来像这样的超级基本组件:
<div class="容器"><span>这是一个工具栏</span>
</mat-toolbar>
到目前为止我只应用了这样的样式:
@import url('https://fonts.googleapis.com/css?family=Comfortaa');.标题 {字体系列:Comfortaa"；}html，正文{高度:100%；边距:0；}.内容 {最小高度:100%；}
在全局 style.css 文件中.
解决方案
一种使用 Flexbox 的方法:
当我们使用 Flexbox 时，我们可以获得一个更干净的解决方案.此外，我的解决方案将涵盖页面的第一个组件应占据 100% 的高度.这通常需要适当地定位元素或使用背景.该代码与 Material 2 的当前版本相匹配 - 在撰写本文时为 2.0.0-beta.12.
标记:
<mat-sidenav #sidenav><mat-list><mat-list-item [routerLink]="['/']">Foo</mat-list-item><mat-list-item [routerLink]="['/bar']">栏</mat-list-item></mat-list></mat-sidenav><div class="page-wrap"><header role="banner"><mat-toolbar color="primary"><按钮类型=按钮"垫图标按钮(点击)="sidenav.open()"title="打开sidenav"><mat-icon>菜单</mat-icon>您的工具栏</mat-toolbar></标题><主类=内容"><路由器插座></路由器插座></main><页脚>具有可变高度的粘性页脚.</页脚>
</mat-sidenav-container>
样式:
/** 实际粘性页脚样式*/.all-wrap {最小高度:100vh；}.page-wrap {显示:弹性；弹性方向:列；最小高度:100vh；}.内容 {弹性:1；}/** 使Router Outlet注入的Component全高:*/主要的 {显示:弹性；弹性方向:列；>*:不(路由器插座){弹性:1；显示:块；}}
您可以在博文 我写的，因为我对我在这里找到的解决方案不满意.还有一个演示.
I have been searching and searching for about 3 hours now because I didn't want to have to ask, but how can I keep a 'footer' variable at the bottom but not like fixed at the bottom, so if the content I have is very small it won't just sit halfway in the page but if I have lots of information it won't lock right at the bottom of the page and sit there over data while you scroll
I have tried several ways including this:
https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html
and most questions related to this I've tested and failed with or don't seem to work at all.
Heres my current code:
<div class="content">
<app-navbar></app-navbar>
<app-footer></app-footer>
</div>
and the <app-content></app-content> is within the navbar because the navbar controls a fullpage sidenav.
The whole app-navbar looks like this:
<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>
And the footer is just a super basic component that looks like this:
<mat-toolbar>
<div class="container">
<span>this is a toolbar</span>
</div>
</mat-toolbar>
Only styling ive applied so far is this:
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
.title {
font-family: "Comfortaa";
}
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
Which is in the global style.css file.
解决方案
An approach that uses Flexbox:
When we utilize Flexbox we can get a cleaner solution. Also my solution will cover that the first component of your page should take 100% of the height. This is often needed to position elements appropriately or to work with backgrounds. The code matches the current version of Material 2 - at the time of writing this is 2.0.0-beta.12.
Markup:
<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>
Styles:
/*
* 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;
}
}
You can find a more detailed description in a Blogpost that I wrote since I was unhappy with the solution I found here. There is also a demo.
这篇关于Angular 2 Material 中的粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
