2016-05-26 17 views
0

Ich kann nicht scheinen, um dies herauszufinden. Ich habe eine eckige App mit Header, Sidebar, Sub-Header und Inhalt. Der Inhalt wird automatisch vergrößert, aber wenn die Seitenleiste länger als der Inhalt ist, wird der Wrapper-Container nicht erweitert. Ich habe eine Kombination aus Höhe Auto/100% versucht, und ich habe versucht, beide klar, aber nichts passiert.ui-View-Layout Problem mit CSS Angular

index.html

<body> 
    <!-- Main HTML gets injected here --> 
    <ui-view id="ng_view"></ui-view> 
</body> 

main.html

<div id="wrapper"> 
    <tp-header></tp-header> 
    <tp-sidebar></tp-sidebar> 
    <tp-subheader></tp-subheader> 
    <!-- container with class="form" gets injected here --> 
    <ui-view id="ng_subview"></ui-view> 
</div> 

CSS

html { 
    height: 100vh; 
} 

body { 
    height: 100%; 
} 

#wrapper { 
    height: auto; 
    //min-height: 100%; 
    width: 1367px; 
    margin: auto; 
    position: relative; 
    //overflow: hidden; 
} 

#ng_view { height: 100%; } 

#ng_subview { display: block; height: 100%; } 

/* The style inside the sidebar */ 
.sidebar { 
    width: 343px; 
    float: left; 
    height: 100%; 
    position: absolute; 
} 

/* .form gets injected into ng_subview */ 
.form { 
    margin: 0px auto; 
    width: 1024px; 
    height: 100%; 
    display: block; 
} 

Die Sidebar nicht die ng-Ansicht und/oder Wrapper div nach unten nicht drücken, wenn es wächst . Ich brauche Hilfe dabei. Danke im Voraus!

Antwort

0

Ich habe es herausgefunden.

Der Hauptgrund für nicht Inhalt nach unten drückt, ist wegen der Sidebar eine absolute Positionierung war. Durch die absolute Position wird das Element aus dem HTML-Fluss entfernt und der Inhalt wird nicht nach unten verschoben.

Auch habe ich ein paar andere Änderungen, aber es war die absolute Positionierung der Hauptgrund war.