Angular Materials - Fußzeile nach MD-Inhalt Scroll

Ich entwarfe gerade eine App mit Angular Materials, aber ich habe ein Layout-Problem festgestellt. Die App ist in zwei Teile mit einem klebrigen Header unterteilt. Die linke Seite scrollt nicht, aber die rechte Seite scrollt. Wenn Sie durch den Inhalt auf der rechten Seite scrollen und das Ende erreichen, scrollt die GESAMTE Seite, um eine Fußzeile anzuzeigen.Angular Materials - Fußzeile nach MD-Inhalt Scroll

Ich habe viele Kombinationen ausprobiert, kann aber nicht das gewünschte Ergebnis erzielen. Jede Hilfe ist willkommen

Vor Scrolling: Before Scrolling

Nach dem Ende Scrollen: After scrolling to the end

Aktuelle Code:

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

Quelle

2016-03-18 Sim

Sie haben das gewünschte Ergebnis nicht wirklich beschreiben. Möchtest du eine feste Fußzeile, die immer am unteren Rand des Fensters sichtbar ist, oder ...? – Lex

Ich möchte eine Fußzeile, die erscheint, nachdem der rechte Bildlaufabschnitt abgeschlossen ist, der dann die linke Seite überholt, die nicht scrollbar ist. Tut mir leid, dass ich nicht klar bin. – Sim

Ich habe einen jsfiddle für etwas ähnliches Dazu hoffe ich, dass es für dich funktioniert. Fühlen Sie sich frei, dasselbe zu aktualisieren.

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

Quelle

2016-03-19 00:38:38 Rahul

Nicht ganz was ich suche. Ich denke, mein Fall ist sehr spezifisch mit der Seite in zwei Teile geteilt. – Sim

versuchen Sie dies http://jsfiddle.net/rahulchaturvedie/mybf7fsq/38/embedded/ – Rahul

Sehr nah, aber die Fußzeile sollte nur erscheinen, nachdem das Scrollen beendet ist. Danke für die fortgesetzte Anstrengung! – Sim

Angular Materials - Fußzeile nach MD-Inhalt Scroll

Antwort

Verwandte Themen