Hey ich erstellen Ember-Anwendung, und ich versuche Sticky Footer setzen.
Ich versuche, dies durch dieses Tutorial zu tun Sticky Footer On CSS-Tricks, Denn es ist Arbeit für mich einmal.
Aber mit Ember seine dosen't ArbeitSticky footer in ember

Meine CSS:

.mainFooter { 
    height:100px; 
    color:white; 
    background-color: #0c2635; 
    text-align:center; 
} 
.wrapper { 
    min-height: 100%; 
    margin-bottom: -100px; 
} 
.wrapper:after { 
    content: ""; 
    display: block; 
} 
.mainFooter, .wrapper:after { 
    height: 100px; 
}

Mein HTML:

<footer class="mainFooter"> 
    SOME TEXT 
</footer>

Wie gesagt, es ist dosent Arbeit.
ich den Quellcode über den Inspektor sehen und ich sah, dass Ember seinen eigenen Wrapper die ich in der application.hbs Datei setzen zum Inhalt hinzugefügt, dieser Wrapper eine Klasse ember-view ich versuche zu tun, so genannt haben:

.ember-view { 
    min-height: 100%; 
}

Aber Es ist dosent Arbeit entweder die Fußzeile in der Mitte der Seite angezeigt.
Kann jemand das versuchen und Erfolg?
Ich würde gerne über eine Lösung für dieses Problem wissen.

Ich weiß nicht, wie gefälschte eine Ember App in jsfiddle/codeopen so lade ich die App auf meinem Server, URL: http://drawyourgif.pe.hu/dist/

EDIT
Nach der Lösung, die kumkanillam sugest Ich habe so :

Application.hbs:

{{outlet "modal"}} 
{{partial "header"}} 
<div id="gif" class="wrapper"> 
    {{outlet}} 
</div> 
{{partial "footer"}}

app.js

App = Ember.Application.extend({ 
    modulePrefix: config.modulePrefix, 
    podModulePrefix: config.podModulePrefix, 
    rootElement: '#gif', 
    Resolver 
});

Und ich bekomme diesen Fehler in der Konsole:

ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined

Was ich falsch gemacht habe?

Quelle

2016-09-30 Harman met

Konnte ein codepen/jsbin? Auch dieses Problem ist mit flexbox sauber/einfach gelöst. Sind Sie offen für die Verwendung von Flexbox? – sheepdog

@sheepdog Hey, ich interessiere mich nicht mit flexbox, nur seine Werke, Schau dir meine bearbeiten Ich habe die Website-URL hinzugefügt, dass Sie das Problem sehen können –

@Harmanmet Ich wandte css Stil 'Position: fest; unten: -3px; links: 2px; rechts: 2px; 'zu' .wrapper: nachdem' es in Ihrer Site funktionierte. Sie können versuchen, diese – kumkanillam

.ember-view wird standardmäßig für alle Glut-Komponente enthalten sein, so ist es nicht gut, CSS-Eigenschaft für diese Klasse anzuwenden.

gibt es viele Möglichkeiten, aber die folgenden sollten helfen.

Sie können Ihre application.hbs in Ihre page-wrap div umwandeln.

hierfür müssen Sie in
index.html

<div id="app-name" class="wrapper"> 
    {{content-for "body"}} 
</div>

application.hbs

<h1> Content </h1> 
{{outlet}} 
<div id="footer"> 
    <p>I'm the Sticky Footer. inside application.hbs</p>  
</div>

konfigurieren rootElement in app.js die unterhalb der Linie aufzunehmen. Dadurch wird die gesamte App gezwungen, sie in app-name div.

app.js

App = Ember.Application.extend({ 
    modulePrefix: config.modulePrefix, 
    podModulePrefix: config.podModulePrefix, 
    rootElement: '#app-name', 
    Resolver 
});

app.css

#wrapper { 
    min-height: 100%; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    bottom: -3px; 
    left: 2px; 
    right: 2px; 
    height: 50px; 
    background-color: rgba(0, 0, 0, 0.8); 
    color: #fff; 
}

Schluss Update:

Sie brauchen nichts in app.js. zu ändern Sehen Sie sich nur die Probe an. Ich denke, das wird Ihnen helfen SAMPLE TWIDDLE

Quelle

2016-10-01 06:28:45 kumkanillam

Hey @kumkanillam Ich habe wie Sie sagte, und es wirft mir einen Fehler, schaue auf meine bearbeiten, um weitere Details zu sehen bitte –

@Harmanmet anstelle von application.hbs Erwähnen Sie es in index.html – kumkanillam

Und was ist 'Link- zu "Helfern" arbeiten sie in der Fußzeile, wenn ich sie auf der Seite des Wurzelelements ausgebe? –

Hier ist eine Lösung, die flexbox verwendet. Sie möchten vielleicht nicht flexbox verwenden, weil Sie damit nicht vertraut sind, aber ich werde diese Antwort für spätere Google-Suchen einreichen.

Hier ist ein codepen mit sehr wenig Inhalt in dem Hauptkörper: http://codepen.io/anon/pen/KgXgjV

Hier ist die gleiche CSS mit viel mehr Inhalt im Hauptbereich: http://codepen.io/anon/pen/dpVpBK

Hier ist ein Beispiel dafür, warum position: absolute funktioniert nicht : https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C

HTML

<html> 
<body> 
    <div id="root" class="ember-application"> 
    <div id="ember332" class="ember-view"> 
     <div class='main-content'> 
     <h1>Welcome to Ember Twiddle</h1> 
     <br /> 

     <p> 
      this page has very little content 
     </p> 
     </div> 
     <div id="footer"> 
     <p>I'm the Sticky Footer. inside application.hbs</p> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

CSS

/* this is just to reset codepen */ 
/* probably not necessary on ember */ 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
/* end reset */ 


html, body, #root { 
    height: 100%; 
} 

.ember-view { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    background: lightblue; 
} 

.main-content { 
    flex: 1; 
} 

#footer { 
    width: 100%; 
    height: 50px; 
    background-color: grey; 
}

Quelle

2016-10-01 12:22:01 sheepdog

Sticky footer in ember

Antwort

Schluss Update:

HTML

CSS

Verwandte Themen