将固定片放置在有角度的材料中

Positioning fixed tabs in angular material

本文关键字：材料更新时间：2023-09-26

我有下面的HTML，用于使用有角度材料的有角度的项目。

我关注的是md标签

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

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

尝试以下所有操作。这些都是常见的。

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

为md选项卡的元素提供以下内容：

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

对孩子们重复，一个人可能正在抵抗bottom: 0;