Angular material 选项卡与 chrome 中的页脚重叠
Angular material tabs overlap footer in chrome
使用angular material,并且它的标签组件似乎与页脚 - 一个MD -Toolbar - 当TAB内容大于window大小时。
它似乎只发生在 chrome 中,而不是在 firefox 中。
这是一个 plunker - 和代码:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="angular-material@master" data-semver="0.10.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script data-require="angular-aria@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-aria.js"></script>
<script data-require="angular-animate@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script data-require="angular-material@0.10.1" data-semver="0.10.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
My favorite dive sites
</div>
</md-toolbar>
<div flex>
<md-content>
<md-tabs md-border-bottom md-dynamic-height>
<md-tab label="tab one">
<md-content class="md-padding">
<h1 class="md-display-1">The Title</h1>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
</md-content>
</md-tab>
<md-tab label="tab two"></md-tab>
</md-tabs>
</md-content>
</div>
<md-toolbar>
<div class="md-toolbar-tools">
Younderwater, 2015
</div>
</md-toolbar>
</body>
</html>
我是不是做错了什么?
非常感谢任何帮助
将
上的 css 更新为:
flex: 1 0 auto;
使用angular material,并且它的标签组件似乎与页脚 - 一个MD -Toolbar - 当TAB内容大于window大小时。 它似乎只发生在 chrome 中,而不是在 firefox 中。 这是一个 plunker - 和代码:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="angular-material@master" data-semver="0.10.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script data-require="angular-aria@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-aria.js"></script>
<script data-require="angular-animate@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script data-require="angular-material@0.10.1" data-semver="0.10.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
My favorite dive sites
</div>
</md-toolbar>
<div flex>
<md-content>
<md-tabs md-border-bottom md-dynamic-height>
<md-tab label="tab one">
<md-content class="md-padding">
<h1 class="md-display-1">The Title</h1>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
<p class="md-body-1">
Just a proposition
</p>
</md-content>
</md-tab>
<md-tab label="tab two"></md-tab>
</md-tabs>
</md-content>
</div>
<md-toolbar>
<div class="md-toolbar-tools">
Younderwater, 2015
</div>
</md-toolbar>
</body>
</html>
我是不是做错了什么? 非常感谢任何帮助
将
上的 css 更新为:
flex: 1 0 auto;