2016-10-04 2 views
0

Ich baue eine eckige Anwendung, die häufig verschachtelte Ansichten verwendet. Bestimmte Ansichten sind jedoch größer als die anderen Elemente auf der Seite und reichen weit über das Ende der übergeordneten Ansicht hinaus.UI-Router: Höhe: 100% auf body-Element ignoriert verschachtelte Ansichtshöhe

Ich verwende Ryan Fait's Sticky Footer so habe ich ein Wrapper um ein enthält div Set height:100% und ich würde die Seite erwarten nur anzupassen und die Fußzeile an der Unterseite der verschachtelten Ansicht zu bewegen aber ich die Stilelemente zu sehen bin der Fußzeile border und background-color verbleiben am Ende des übergeordneten Div, während der Inhalt der Fußzeile an das Ende des geschachtelten div geschoben wird.

ein Bild mit, wie ich die Sprache mit immer genau bin zu kämpfen: enter image description here

ich wirklich für jede Lösung, die CSS, um etwas von der Festsetzung, die die Fußzeile wie das Ändern oder mit hackier scheint ng-if/ng-Klasse auf bestimmten Seiten. Ich stelle mir vor, dass ich etwas falsch verstehe über CSS/UI-Router, aber ich kann es nicht wirklich verfolgen.

Der Code ist nicht wirklich interessant, aber hier ist es?

CODE

.wrapper { 
 
    min-height: 100%; 
 
    margin-bottom: -50px; 
 
} 
 
.push { 
 
    height: 50px; 
 
} 
 
.footer { 
 
    display: block; 
 
    height: 50px; 
 
} 
 
.nested { 
 
    max-height: 500px; 
 
}
<body> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <h1>Some text</h1> 
 
     <ui-view class="nested"></ui-view> 
 
    </div> 
 
    <div class="push"></div> 
 
    </div> 
 
    <footer class="footer"> 
 
    <span>some copy</span> 
 
    </footer> 
 
</body>

+0

erstellen Sie eine Demo, die dies reproduziert. CSS 'flexbox' würde das alles heilen – charlietfl

+0

Dies ist ein reines CSS-Problem (bzw. Verständnis bestimmter Aspekte davon) und hat insbesondere nichts mit eckigen zu tun. Es ist, was eine feste Höhe _does_ festlegt. Die Höhe deines Wrappers ist nicht begrenzt, da du nur eine minimale Höhe festlegst - aber die Höhe des Körpers ist begrenzt, also darf Inhalt, der sich mehr als diese Höhe erstreckt, aus dem Körperelement herausfließen, aber nicht _extentieren_ Höhe. Gehen Sie in die Einheiten des Ansichtsfensters, speziell 'vh', und verwenden Sie diese für Ihre (Min-) Höhen. Sie benötigen keine feste Höhe für das Elternelement, im Gegensatz zu Höhen in Prozent. – CBroe

+0

Entschuldigung @CBroe, aber ich bin mir nicht sicher, ob ich Ihrem Vorschlag folge. Willst du sagen, dass du eine Min-Height-Viewport-Unit auf anlegst, weil das etwas ist, das ich ausprobiert habe und nicht funktioniert hat ... oder habe ich deinen Vorschlag komplett falsch verstanden? – brokyo

Antwort

0

Wenn Sie Prozentwerte für die Höhe verwenden (das heißt eine relative Höhe) haben die Mutterelementhöhen zu definieren. In Ihrem Fall benötigen Sie auch height: 100% auf Körper und HTML, wie

html, body { 
    height: 100%; 
}