eckig-material holy gral flexbox layout

Ich benutze eckig-material webkit und ich habe problem mit höhe des containers, die immer abhängig von dem gerät einstellen wird. Das Problem, das ich habe, besteht darin, dass die Kindelemente den mittleren Container verlassen und im Fußbereich rendern. Auf dem Bild zeigt Nummer 1 die Situation, wenn der Inhalt des grünen Bereichs klein genug ist, um die Gerätehöhe zu erreichen. Nummer 2 zeigt mein Problem und 3 ist mein Ideal-Layout: eckig-material holy gral flexbox layout

Mein Layout wie folgt aussieht:

<body layout="column"> 
    <div> header </div> 
    <div layout="row" flex"> 
    <md-sidenav md-is-locked-open="true" flex="20"></md-sidenav> 
    <div layout="column" flex ui-view></div> 
    <md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav> 
    </div> 
    <div class=footer"></div> 
</body>

Ich kann nicht Lösung auf den Winkel-Material docs finden - vielleicht bekomme ich nicht einige der Ideen, aber es ist der zweite Tag, an dem ich versuche, dieses Layout zu implementieren, und ich versage immer noch.

Quelle

2016-09-25 Konrad Janczyk

Ich denke, das ist das Beste, was Sie mit Flex tun können - CodePen

Markup

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex> 
    <div style="background:red; height:100px"></div> 
    <div layout="row" flex="90"> 
    <div style="background:blue" flex="10"></div> 
    <div layout="column" flex="80"> 
     <div > 
      <!-- content --> 
     </div> 
     <div style="background:yellow; height:100px"></div> 
    </div> 
    <div style="background:blue" flex="10"></div> 
    </div> 
</div>

Quelle

2016-09-25 14:39:56

Dank für die Hilfe! Leider wollte ich das nicht machen. Ich möchte nicht, dass Inhalte überlaufen. Ich möchte, dass dieser Container eine größere Höhe erhält, sodass die Fußzeile unter dem Inhalt und den Navigationsleisten liegt. Ich möchte keine feste Fußzeile oder innere Schriftrolle im Inhalt haben. Um 100% klar zu sein - in Ihrem CodePen, wenn Sie Überlauf entfernen, Fußzeile ist in der Mitte - Ich will es am unteren Ende –

@KonradJanczyk - Siehe Update. Ich denke, dass Sie die Höhen speziell für die Kopf- und Fußzeile definieren müssen, aber das ist kein Problem, da Sie wahrscheinlich möchten, dass sie behoben werden. –

Danke dafür! Ich dachte, ich könnte dies auf eine "sauberere" Art und Weise tun, aber dies sollte tun –

eckig-material holy gral flexbox layout

Antwort

Verwandte Themen