Angular Material ng-view Strecke div min-Höhe css 100% auf Safari

Ich habe ein Problem mit einem einfachen Container div nicht Stretching auf Min-Höhe: 100% in meinem eckigen Material Projekt.Angular Material ng-view Strecke div min-Höhe css 100% auf Safari

Ich habe eine hier codepen erstellt: Codepen

Das Problem ist, dass ich haben unterschiedliche Mengen von Inhalten innerhalb des Content-Holding div (in Originalprojekt ng-Ansicht) und brauchen daher eine min-height haben von 100%-footerHeight-headerHeight, um den ganzen Bildschirm zu füllen und eine klebrige Fußzeile an der Unterseite zu haben.

Vielen Dank im Voraus.

EDIT:

Vielleicht war ich nicht klar genug: Ich möchte die Fußzeile immer unter dem Inhalt und bei sehr wenige Inhalte angezeigt werden, um es auf den Boden kleben sollte. Also lassen Sie den content-hold div füllen mit: min-height: calc (100% -footerHeight-headerHeight) der Höhe ist die Idee.

EDIT 2:

Ich habe es für Firefox und Chrome mit den Antworten arbeiten ich hier. Leider habe ich mit dem neuen Ansatz das selbe Problem auf Safari. Hier ist eine neue Codepen.

Quelle

2016-04-14 DEls

Ich habe endlich eine Lösung gefunden (funktioniert für alle Browser einschließlich Handy!), Die absolut vernünftig und einfach scheint. Ich habe die folgende HTML-Struktur und CSS:

html:

<div id='nav'></div> 
<md-content scroll flex layout='column'> 
<div id='content' ng-view flex> 
</div> 
<div id='footer'> 
    <footer>Footer</footer> 
</div> 
</md-content>

css:

* { 
    margin: 0; 
} 
body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 
#nav { 
    z-index: 2; 
} 
#content { 
    -webkit-flex: 1 0 auto; 
    flex: 1 0 auto; 
}

Quelle

2016-04-29 10:21:13 DEls

Fügen Sie diese in Ihrem Stylesheet:

#footer { 
    background-color: black; 
    color: white; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
}

Footer am Boden kleben. Hilf dieser Hoffnung.

Quelle

2016-04-14 09:33:17 DieuNQ

leider vielleicht war ich nicht klar: Ich möchte die Fußzeile immer unter dem Inhalt angezeigt werden und bei sehr wenigen Inhalten sollte es auf der Unterseite bleiben. Also lassen Sie den content-hold div füllen mit: min-height: calc (100% -footerHeight-headerHeight) der Höhe ist die Idee. Wenn ich Ihre Lösung verwende, wird die Fußzeile über Inhalt schweben, wenn der Inhalt mehr als 100% Bildschirmgröße füllt. – DEls

DEMO sollten Sie verwenden flex

css

body{ 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

in Ihrem html, ich alle Styling der Höhe entfernt, und im Grunde mit dieser Struktur angekommen

<body> 
    <md-toolbar></md-toolbar> 
    <div flex>your contents here</div> 
    <footer></footer> 
</body>

Winkelmaterial haben eine Richtlinie Attribut flex, die das angelegte Element flex-grow: 1 macht, die im Grunde alle den verbleibenden Platz nach seiner Geschwister Höhe einnimmt sind

platziert

weitere Informationen über flex

Die Art und Weise Sie das Problem präsentiert ist groß, mach weiter.

Quelle

2016-04-14 09:54:16

Danke für die Antwort du hast genau was ist mein Problem. Wenn ich jedoch Ihren Ansatz in meinem eckigen Materialprojekt verwende und Inhalte dynamisch (Ajax) lade, wird die Fußzeile am unteren Rand des Bildschirms platziert (100% Größe), während der Inhalt länger als der Bildschirm ist. Vielleicht haben Sie auch das div über dem Content-hold div mit ng-if = "" bemerkt ... Für einige Seiten brauche ich ein bildschirmfüllendes Bild (100%) über dem Inhalt. Wenn ich Höhe benutze: 100% da(), wird das Bild nicht angezeigt. Was ist der richtige Flexing-Ansatz hier? – DEls

Ich fühle mich wie das eckige Material html, Körper {Höhe: 100%; Position: relativ;} ist das Problem .. – DEls

Ich werde eine einfachere Demo für Sie erstellen, um zu viel Lärm von den Elementen zu vermeiden, die nicht verwandt ist –

Sie können js verwenden, um Ihr Problem zu lösen.

var main = document.getElementById('main'); 
var content = document.getElementById('content'); 
var footer = document.getElementById('footer'); 
var remainHeight = main.offsetHeight - content.offsetHeight - footer.offsetHeight; 
document.getElementById('footer').style.marginTop = remainHeight + 'px';

Die #main in div hat height: 100%. Die #content in div hat Klasse ng-view.

Sie können es auch in Ihrem Controller schreiben.

Quelle

2016-04-14 10:41:12 DieuNQ

Dank ich könnte dies als die dreckige Abhilfe verwenden, aber ich würde jede Seite manipulieren müssen und das ist nicht wirklich der eckige Weg um es nach meinem Verständnis zu tun. – DEls

Angular Material ng-view Strecke div min-Höhe css 100% auf Safari

Antwort

Verwandte Themen