Question

我试图在列表上方有一个固定div的md-sidenav中定义md-list的动态高度，一些输入用于过滤列表，一个固定按钮在页脚上，所有组件都在MD-sidenav。

+ SideNav     +
+++++++++++++++
+ Toolbar     +
+-------------+
+ Filter Div  +   => this must have fixed height (max-height=150px)
+-------------+
+ md-list     +   => this list must fill all space between the filter div and
+             +      the button div, applying some scroll bars if the number
+             +      of elements force the height to be greather than screen.
+             +
+-------------+
+ Button Div  +  => this div must be fixed at the bottom of screen
+++++++++++++++

我真的不知道如何定义md-list的高度并修复屏幕底部的按钮div。

代码：

<md-sidenav class="md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            ng-click="userCtrl.toggleList()" aria-label="Show User List"
            md-is-locked-open="$mdMedia('gt-sm')">

    <md-toolbar layout="row" class="md-whiteframe-z1">
        <h3>Users</h3>
        <md-button class="md-icon-button" aria-label="Filtro" style="top: 12px;"
                   ng-click="userCtrl.searching = !userCtrl.searching">
            <md-icon md-svg-icon="assets/svg/find.svg"></md-icon>
        </md-button>
    </md-toolbar>

    <div layout="column">
        <div class="md-whiteframe-z1" layout-padding>
            <div layout="row">
                <md-checkbox ng-model="userCtrl.filterData.android">
                    Android
                </md-checkbox>
                <md-checkbox ng-model="userCtrl.filterData.ios">
                    iOS
                </md-checkbox>
            </div>
            <div layout="column">
                <md-input-container class="md-block">
                    <label>Email</label>
                    <input ng-model="userCtrl.filterData.username">
                </md-input-container>
            </div>
        </div>

        <md-list>
            <md-list-item ng-repeat="it in userCtrl.users">
                <md-button id="{{it.objectId}}" style="text-transform: none;" ng-click="userCtrl.selectUser(it)"
                           ng-class="{'selected' : it === userCtrl.selected }">
                    <md-icon id="active-ios" md-svg-src="assets/svg/iphone.svg"
                             ng-if="it.device == 'ios'"></md-icon>
                    <md-icon id="active-android" md-svg-src="assets/svg/android.svg"
                             ng-if="it.device == 'android'"></md-icon>
                    {{it.username}}
                </md-button>
            </md-list-item>
        </md-list>

        <div class="md-whiteframe-z1">
            <md-button ng-click="userCtrl.loadMore()">Carregar Mais...</md-button>
        </div>
    </div>
</md-sidenav>

Answer 1

查看以下链接。

http://codepen.io/next1/pen/pyaJWR

 <md-content layout="row" layout-fill>
<md-sidenav class="md-sidenav-left" aria-label="Show User List" md-is-locked-open="$mdMedia('gt-sm')" style="background-color:red">

  <md-toolbar layout="row" class="md-whiteframe-z1" layout-align="center center">
    <h3>Users</h3>
    <md-button class="md-icon-button" aria-label="Filtro" style="top: 12px;" ng-click="userCtrl.searching = !userCtrl.searching">
      <md-icon md-svg-icon="assets/svg/find.svg"></md-icon>
    </md-button>
  </md-toolbar>

  <div layout="column" class="md-whiteframe-z1" layout-padding>
    <div layout="row">
      <md-checkbox ng-model="userCtrl.filterData.android">
        Android
      </md-checkbox>
      <md-checkbox ng-model="userCtrl.filterData.ios">
        iOS
      </md-checkbox>
    </div>
    <div layout="row">
      <md-input-container class="md-block">
        <label>Email</label>
        <input ng-model="userCtrl.filterData.username">
      </md-input-container>
    </div>
  </div>

  <md-content flex>
    <md-list layout-fill layout-align="center center">
      <md-list-item ng-repeat="it in [1,2,3,4,5,6,7,8,9,0]">
        <md-button flex> {{it}} </md-button>
      </md-list-item>
    </md-list>
  </md-content>

  <md-button ng-click="userCtrl.loadMore()">Carregar Mais...</md-button>
</md-sidenav>
<md-content layout="column" style="background-color:yellow" layout-fill>
  <div flex>
    Main Content

  </div>
</md-content>

为了简化，我删除了一些样式类。我确信添加它们不会给你带来麻烦。

如何定义md-sidenav内的md-list的高度，在side-nav中有固定的底部div

1 个答案: