我将以下 HTML 与使用 Angular Material 的 Angular 项目一起使用。
我的担忧是基于 md-tabs
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--Scripts-->
<script src="scripts/bundle.js"></script>
<script src="scripts/app.js"></script>
<!--Stylesheets-->
<link rel="stylesheet" href="css/bs.css" />
<link rel="stylesheet" href="css/bsf.css" />
<link rel="stylesheet" href="css/bundle.css" />
<link rel="stylesheet" href="css/index.css">
<title>RippleAlpha</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="scripts/leaf.js"></script>
<style></style>
</head>
<body layout="column" ng-app="rippleApp" ng-controller="tabCtrl">
<header>
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button>
<md-button class="navbar-brand" ng-click="openLeftMenu()">SM</md-button>
</md-button> <!-- fill up the space between left and right area -->
<span flex></span>
</div>
</md-toolbar>
</div>
<md-sidenav md-component-id="left" class="md-sidenav-left">Test case</md-sidenav>
</header>
<div layout-fill class="containerh">
<div id="content" ui-view> </div>
<div class="tab-container">
<md-tabs style="height:100%;position:relative;bottom:0px;" flex style="margin: 0" md-align-tabs="bottom" md-stretch-tabs="always" md-swipe-content="" layout-fill md-selected="selectedIndex">
<md-tab label="a"></md-tab>
<md-tab label="Home"></md-tab>
<md-tab label="c"></md-tab>
</md-tabs>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
目前，我的所有输出下都出现随机空白，并且我的选项卡没有位于页面底部。它们在底部上方徘徊了相当大的距离。
我一直在四处寻找，但尚未找到合理的解决方案。
最佳答案
你的布局一团糟，你需要这样的东西:
<body flex layout="row">
<div ng-cloak flex layout="column" ng-app="MyApp">
<md-toolbar></md-toolbar>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-content layout-padding>
Some sidenav content
</md-content>
</md-sidenav>
<md-content flex layout="column">
<md-tabs flex md-border-bottom="" md-align-tabs="bottom">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</section>
</div>
</body>
关于javascript - 在有 Angular Material 中定位固定片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37264541/