角度素材 - MDコンテンツスクロール後のフッター

現在、角度材料を使用してアプリケーションを設計していますが、レイアウトに問題があります。アプリは半透明のヘッダーで分割されています。左側はスクロールしませんが、右側はスクロールします。右側のコンテンツをスクロールして最後に到達すると、ENTIREページがスクロールしてフッターを表示します。角度素材 - MDコンテンツスクロール後のフッター

多くの組み合わせを試しましたが、目的の結果が得られません。すべてのヘルプはスクロールする前に

を高く評価されています 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>

出典

2016-03-18 Sim

あなたは本当にあなたの希望する結果を説明していませんでした。常にウィンドウの下部に表示されているスティッキーフッターが必要なのか、それとも...？ – Lex

右のスクロール部分が完了した後に表示されるフッターが必要なので、スクロールできない左側を追い越します。申し訳ありませんが明確ではありません。 – Sim

私は似たようなのために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; 
}

出典

2016-03-19 00:38:38 Rahul

私が探しているものではありません。私のケースは、ページを2つに分けて非常に具体的だと思います。 – Sim

これを試してみてくださいhttp://jsfiddle.net/rahulchaturvedie/mybf7fsq/38/embedded/ – Rahul

非常に近いですが、フッタはスクロールが完了した後にしか表示されません。継続的な努力をありがとう！ – Sim

角度素材 - MDコンテンツスクロール後のフッター

答えて

関連する問題