Question

我将以下HTML用于使用角度材质的角度项目。

我的担心是基于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>

目前我在所有输出下都有随机空白区域，而且我的标签没有放在页面底部。它们在底部上方徘徊了相当多的数量。

我一直在寻找并且尚未找到合理的解决方案。

Answer 1

你的布局很乱，你需要这样的东西：

<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>

http://codepen.io/kuhnroyal/pen/xVvMKB

Answer 2

尝试以下所有方法。这些是常见的。

删除边距并重置高度。
```
body {
  height: 100%;
  margin: 0;
}
```

给出md-tabs的元素：

md-tabs { //use the real element names
  margin-top: -100%; //may need to adjust accordingly
}

与孩子们重复，一个人可以抵抗底部：0;

将固定标签定位在角材料中

2 个答案: