Anpassung der Höhe der ui-view-element[Angular.js Angular-UI-Router]

Ich bin mit angular.js und angular-ui-router. Es gibt ein kleines problem mit der Höhe der ui-view-element. Es ist fixiert auf die Höhe der view-port statt, dann seinen Inhalt. Der Inhalt wird dynamisch aktualisiert, die Höhe der Inhalt ändert sich, sondern auch die übergeordneten ui-view-element bleibt das gleiche.. auf Grund dessen die Höhe des body-Elements bleibt auch die gleiche wie die der ui-view. Wie gerecht dieses problem 

<body> 
    <div ui-view>
        <div id = "content"> 
            <!-- Some content with height more then that of view-port -->
        </div>
    </div>
</body>
  • Dies ist nicht eine angularjs-Ausgabe; es ist ein CSS Problem. Überprüfen Sie Ihre CSS-Regeln.
  • Ich habe versucht, mehrere Optionen, aber alle vergeblich.. wie die Einstellung der min-height auf 100%. Was kann ich sonst noch versuchen..
  • Sie müssten, um zu posten Sie Ihre css-Datei für uns eine Idee haben, was Los ist. Wenn Sie buchen ein jsfiddle oder plunkr, die zeigt, dass das problem dann wird es helfen, eine Menge.
InformationsquelleAutor Adil Malik | 2014-11-23
  1. 2

    Dies ist ein CSS-Problem, nicht ein Winkel-Problem. Dein Körper hat wahrscheinlich eine Höhe auf 100% gesetzt. Die Einstellung

    body {
    height: auto;
}

    wird es zu beheben.

    Dokumentation:

    Prozentsatz der Höhe, auf der das root-element ist relativ zu dem ersten enthaltenden block.

    InformationsquelleAutor Raymundus
  2. 1

    Erstellte ich eine Beispiel mit einem Basis-layout. Es sollte zeigen, oder einige Antworten geben, wie mit UI-Router, HTML und CSS. Die Idee des Layouts:

    • festen oberen Leiste
    • festen linken Spalte
    • dynamische zentral

    inte index.html <div ui-view=""></div> Spritzen wir layout.tpl:

    <div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

    Und dies sind die Stile:

    .top { background: #bcd;
position: absolute; height: 100px; width: auto; left: 0; right: 0; top: 0; bottom: auto;
}
.middle {
position: absolute; height: auto; width: auto; left: 0; right: 0; top: 100px; bottom: 0;
}
.left { background: #def;
position: absolute; height: auto; width: 200px; left: 0; right: auto; top: 0; bottom: 0;
}
.main { 
position: absolute; height: auto; width: auto; left: 200px; right: 0; top: 0; bottom: 0;
}

    Und diese sind states für diese einfache app:

    $stateProvider
.state('app', {
    url: '/app',
    views: {
      '@' : {
        templateUrl: 'layout.html',
      },
      'top@app' : { templateUrl: 'tpl.top.html',},
      'left@app' : { templateUrl: 'tpl.left.html',},
      'main@app' : { templateUrl: 'tpl.main.html',},
    },
  })
.state('app.list', {
    url: '/list',
    templateUrl: 'list.html',
  })
.state('app.list.detail', {
    url: '/:id',
    views: {
      'detail@app' : {
        templateUrl: 'detail.html',
        controller: 'DetailCtrl'
      },
    },
  })

    Check it hier

    InformationsquelleAutor Radim Köhler
Schreibe einen Kommentar