Angularjs 角度材质-md内容滚动后的页脚_Angularjs_Css_Angular Material

Angularjs 角度材质-md内容滚动后的页脚

angularjs css angular-material

Angularjs 角度材质-md内容滚动后的页脚,angularjs,css,angular-material,Angularjs,Css,Angular Material,我目前正在设计一个使用角材质的应用程序，但我遇到了一个布局问题。应用程序被一分为二，并带有一个粘性标题。左侧不滚动，但右侧将滚动。如果您正在滚动右侧的内容并到达末尾，则整个页面将滚动显示页脚我尝试了很多组合，但都没有达到预期的效果。谢谢你的帮助滚动前：滚动到末尾后：当前代码： <body layout="column"> <md-toolbar> <h2 class="md-toolbar-tools"> <md-

我目前正在设计一个使用角材质的应用程序，但我遇到了一个布局问题。应用程序被一分为二，并带有一个粘性标题。左侧不滚动，但右侧将滚动。如果您正在滚动右侧的内容并到达末尾，则整个页面将滚动显示页脚

我尝试了很多组合，但都没有达到预期的效果。谢谢你的帮助

滚动前：

滚动到末尾后：

当前代码：

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


登录
某物
搜寻
溢出的文本

我有一个类似的JSFIDLE，希望它对您有用。请随时更新相同的内容

你没有真正描述你想要的结果。您想要一个始终在窗口底部可见的粘性页脚，还是…？我想要一个在右滚动部分完成后出现的页脚，它将覆盖不可滚动的左侧。对不起，我不清楚。不完全是我要找的。我想我的情况是非常具体的，页面分为两部分。非常接近，但是页脚应该只有在滚动完成后才会出现。谢谢你的持续努力！

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

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