Question

我目前正在使用Angular Materials设计应用程序，但我遇到了布局问题。该应用程序分为两半，带有粘性标题。左侧不滚动，但右侧将滚动。如果您滚动右侧的内容并到达结尾，则整个页面将滚动以显示页脚。

我尝试了很多种组合，但无法获得理想的效果。任何帮助表示赞赏

滚动前： Before Scrolling

滚动到最后： After scrolling to the end

当前代码：

<body layout="column">

<md-toolbar>
    <h2 class="md-toolbar-tools"> 
        <md-button class="md-raised">Sign In</md-button>
    </h2>  
</md-toolbar>

<div ng-controller="LandingController" layout="row">

        <!-- Left Side -->
        <div flex class="search-background" layout ="row" layout-align="center center">
            <md-input-container layout="row">
                <label>Something</label>
                <input ng-model="airport">
            </md-input-container>
            <md-button>Search</md-button>
        </div>

        <!-- Right Side -->
        <md-content flex layout-padding>
            <p> Text that overflows </p>
        </md-content>
</div>

<!-- Where do I put the footer/format the layout -->

<script type="text/javascript" src="js/app/all.min.js"></script>

Answer 1

我有一个jsfiddle用于类似的东西，希望它适合你。随意更新相同的内容。

jsFiddle

<body ng-app="layout" ng-controller="AppCtrl">
  <div layout="row" flex>
    <div layout="column">
      <md-toolbar md-whiteframe="2">
        <div class="md-toolbar-tools">
          <span>Material header</span>
          <span flex></span>
        </div>
      </md-toolbar>
    </div>
  </div>
  <div layout="row" layout-xs="column">
    <div class="content-section" flex>
      Should not scroll
      </div>
    <div class="content-section" flex>
      <div class="text-center">
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
      </div>
      </div>
  </div>
  <div layout="row" flex>
    <div layout="column">
      <md-toolbar md-whiteframe="2">
        <div class="md-toolbar-tools">
          <span>Material footer</span>
          <span flex></span>
        </div>
      </md-toolbar>
    </div>
  </div>
</body>

CSS

html,
body {
  overflow: hidden;
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

.content-section {
  height: calc(100vh - 128px)!important;
  overflow-y: auto;
}

Angular Materials - md-content滚动后的页脚

1 个答案: