Ember Ansichtshöhe

Ich versuche, die Root-Ansicht für meine Ember-Anwendung auf volle (100%) Höhe zu bekommen, bisher erfolglos.Ember Ansichtshöhe

Warum brauche ich das? Ich habe eine Fußzeile, die ich nach unten ausrichten möchte, auch wenn der Seiteninhalt nicht die ganze Höhe ausfüllt. Zu diesem Zweck habe ich folgendes CSS:

.push { 
    height: 60px; 
} 

.content { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -60px; 
}

und HTML (mit Twitter Bootstrap):

<body> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    <!-- page content --> 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</body>

Dies funktioniert gut ohne Ember. Nun, Einführung Ember:

<script type="text/x-handlebars" data-template-name="application"> 
    <div class="navbar navbar-fixed-top"><!-- ... --></div> 
    <div class="content"> 
    <div class="push"><!--//--></div> 
    <div class="container"> 
    {{outlet}} 
    </div> 
    <div class="push"><!--//--></div> 
    </div> 
    <footer>Copyright ... 2013</footer> 
</script>

Und jetzt funktioniert es nicht mehr!

Das verdammte Ding fügt eine <div id="emberXYZ" class="ember-view">, die das ganze Ding enthält, die an sich ziemlich gut ist, außer dass div nicht volle Höhe hat und die Fußzeile nur in der Mitte der Seite direkt nach dem Inhalt hängt.

Ich googelte herum für eine Lösung, konnte aber nichts finden, das mir erlauben würde, dieses Problem zu umgehen. Meine Vermutung ist der einfachste Weg wäre, Ember die Grundansicht auf 100% Höhe zu setzen (scheint nicht zu finden, wie man das macht), aber vielleicht gibt es noch einen anderen cleveren Trick, der das erreichen wird, was ich will. Was auch immer die Lösung ist, ich brauche sie mindestens IE8-kompatibel.

Vielen Dank im Voraus!

Quelle

2013-03-26 user510159

warum nicht '.container> div {min-height: 100%; } '? –

Leider hilft das nicht. Wenn 'content' bereits min-height auf 100% gesetzt hat, ist das Problem nicht 'container'. Das Problem ist das Ember-View-Div, das nicht die volle Höhe einnimmt. – user510159

Oh, du meinst die Anwendungsansicht. App.ApplicationView = Ember.View.extend ({classNames: ['meine-Klasse']}) –

Hier kann ich zwei Antworten geben, die nicht mit Ember.JS verwandt sind
1) So legen Sie Root-Element von EMberApp Höhe auf 100% - Sie müssen keine Änderungen in Ember App-Code tun . Setzen Sie in CSS einfach die Höhe der ember-view-Klasse auf 100%.

.ember-view { 
height: 100%; 
}

, wenn Sie andere Ansichten mit diesem Styling vermeiden möchten, können Sie die ID Ansicht wie u verwenden hier angegeben ein emberXYZ.

Aber Ihre eigentliche Forderung ist
2) Fußzeile zu machen nehmen nur Boden des page-- Sie tatsächlich Fußzeile absolute und stellen Sie den bottom Wert 0 machen kann.

footer { 
position:absolute; 
bottom: 0px; 
}

Quelle

2013-03-26 17:45:18 thecodejack

Danke für Ihre Antwort. Leider 1), die Höhe in der Ember-View-Klasse einstellen wird mit allen anderen Ansichten und der XYZ-Teil in der ID ist dynamisch (es könnte auf diese Weise gelöst werden, aber ich müsste einen Weg zu finden Fügen Sie der Wurzel-Ember-Ansicht eine feste ID hinzu - scheint nicht dokumentiert zu sein. Für 2), die absolute Platzierung ist ein bisschen Betrug. Irgendwie könnte ich das ohne absolutes tun, aber auf eine Weise, die besser als das obige mit Ember funktioniert? – user510159

Um einer Ember-Ansicht eine spezifische Element-ID zuzuweisen, legen Sie die Eigenschaft 'elementId' fest. Offensichtlich muss es pro HTML-Code auf der Seite eindeutig sein. –

Wenn Sie die Anwendungsansicht definieren können Sie dann Dinge wie die Klasse anpassen:

App.ApplicationView = Ember.View.extend({ 
    classNames: ["ember-app"] 
})

Anschließend können Sie Ihre CSS definieren:

.ember-app { 
    height: 100%; 
}

Quelle

2013-08-03 17:23:36

Dies ist der Glutweg. – FutoRicky

ich hatte das gleiche Problem versucht, bekomme Sticky Footers, um mit Ember JS und Bootstrap zu arbeiten. Wie Sie festgestellt haben, liegt das Problem darin, dass Ember JS die Ansicht innerhalb eines Containers div erstellt, der nicht die 100% Höhe erreicht.

Wie Ember nur 1 sofort Kind .ember-view auf die <body> (d. H. Die Anwendungsansicht) rendert. Wir können dieses CSS verwenden, das in Browsern funktioniert, einschließlich IE8.

/* Works in all browsers, does not effect other views within your application */ 
body > .ember-view { 
    height: 100%; 
}

Es bewirkt keine .ember-view ‚s, die Subviews in Ihrer Anwendung sind, weil sie nicht direkt Kinder Ihrer Seite <body> sein wird.

Quelle

2013-11-03 15:58:14 Scott

Scheinbar funktionieren diese 2 Lösungen nicht. Auch die einfache .ember-Ansicht {height: 100%}. Ich kann aber die Ember-View-Klasse div im Inspektor sehen. Irgendwelche Ideen ? –

Hat irgendwie nicht funktioniert. Musste flex auf die Klasse ember-view verwenden. –

Nur um die Leute wissen zu lassen, hat diese Lösung für mich funktioniert. Für Ember v1.11 musste ich zuerst das Standard-Ember-RootElement Ember.Application.create überschreiben. Setzen Sie dann mein rootElement auf 100% Breite und Höhe. Danach funktionierte die obige Lösung sofort. –

Ich bin vor kurzem auf dieses Problem gestoßen und es dauerte einige Zeit, um es zu beheben, und ich wollte nur meine Lösung mit euch teilen.

"glut-cli": "2.13.1"
"Bootstrap": "^ 4.0.0-alpha.6"

So wie user510159 das Problem mit der glut-View-Klasse liegt schrieben, das ist eingestellt werden.

Die Lösung von Scott, um die height: 100%;-Eigenschaft der Ember-View-Klasse hinzuzufügen, ist die Hälfte der Lösung.

/* Works in all browsers, does not effect other views within your application */ 
    body > .ember-view { 
    height: 100%; 
}

Denn es in meinem Fall arbeiten musste ich die Höheneigenschaften für die inneren div Elemente meiner html einzustellen.

<div class=ember-view> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

sccs:

#header { 
    height: 20%; 
} 

#content{ 
    height: 70%; 
} 

#footer { 
    height: 10%; 
}

Ich hoffe, das hilft.

Quelle

2017-05-24 13:23:29

Ember Ansichtshöhe

Antwort

Verwandte Themen