HTML, Body die Höhe 100% funktioniert nicht
Ok, also ich habe eine mobile Anwendung mit Cordova und AngularJS. Für das styling benutze ich Weniger und Bootstrap.
Problem
In der mobilen app habe ich versucht die Größe meine divs mit Prozent (%). Aber das scheint nicht zu funktionieren. Ich kann nicht scheinen zu ändern, das folgende Verhalten: The divs are as big as the content inside of them. Dieses problem klingt ganz einfach, und ich habe versucht, viele Optionen hier (stackoverflow) sowie auf das web. Aber ich habe nicht die Lösung gefunden, es zu beheben und es ist immer ziemlich nervig.
Ich habe versucht
Hinzufügen html, body { height: 100% },
Hinzufügen html, body, #canvas { height: 100%}
Hinzufügen #canvas { min-height: 100% }
Hinzufügen html { height: 100% } body { min-height: 100% }
Und eine Menge anderer Varianten. Mit px funktioniert, aber ich weiß nicht, wie groß mein mobiles Gerät ist, so dass ist nicht wirklich praktisch.. (ich benutze auch das bootstrap und einige Medien-Anfragen für styling).
Beispiel
Wenn ich das hinzufügen von Elementen zu meine div bekomme ich das folgende Verhalten:
Möchte ich entfernen, die weißen leeren Raum, aber das kann ich nur erreichen, wenn mit px statt %.
Weniger Beispiel:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: @cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: @companyColor;
color: @textColor;
}
.incidentContainer {
background: @appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: @textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: @companyColor;
}Zusätzliche Informationen
Ich bin mit AngularJS, damit meine Anwendung ist eine single-page-Anwendung. Meine index.html sieht wie folgt aus:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>Natürlich mit den standard-links zu meinen CSS-sheets und so weiter.
Alle anderen Seiten sind, gehören in den " ng-view' und don T haben keine oder - tags. Dies, weil Sie enthalten sind.
Lösung
War die Lösung, fügen Sie die folgende CSS-Regel:
div[ng-view]{
height: 100%;
}Funktionierte, weil alle divs (außer für html & Körper) sind Kinder von diesem Artikel. Hinzufügen der zu 100% aus dem div-Element-Raum span zu 100% auf dem Bildschirm und stellt somit einen Raum für den Prozentsatz zu arbeiten.
Credits gehen an Jai für diese Antwort!
- Wir müssen finden den gerenderten HTML-Struktur.
- Hinzugefügt gerenderten HTML-Struktur
- Beziehen Sie sich auf die "Extra-Informationen" - Abschnitt? Es sieht aus wie Eckige macht, dass die post-pageload. Vielleicht könnte man offene Entwickler-Tools auf der geladenen Seite mit der rechten Maustaste auf <body>, und klicken Sie dann auf HTML Bearbeiten, und kopieren Sie Sie von dort? Dies ist ein styling-Problem, so dass wir nur wirklich besorgt darüber, wie das HTML aussieht am Ende. Sie können entfernen Sie die innere-level-Teile, die Sie glauben, sind Sie nicht relevant ist (schreiben Sie einfach "Viel Inhalt" oder sowas)
- kann immer noch nicht sehen, keine gerenderten html, wenn Ihre html wird produziert, indem man die Winkelgeschwindigkeit, dann müssen Sie überprüfen Sie das element und fügen Sie den html-von dort
Du musst angemeldet sein, um einen Kommentar abzugeben.
Was scheint mir die Richtlinie
ng-viewist die Muttergesellschaft von Ihrer Anwendung und denheader, content, footergeladen werden, in diesem div. So haben Sie Ihreheaderdiv an der richtigen Stelle, Ihre Fußzeile ist auch richtig aufgestellt, da es absolut positioniert ist.Aber bei Ihrem content-Bereich, relativ zu den
ng-viewdiv.Ich würde Ihnen empfehlen, machen Sie es
100%Höhe. So etwas wie:ng-view70% Höhe wie die employeeContainer ist, dann ist die employeeContainer 100% Höhe (in der ehemaligen element). Alle anderen intermediate Container müssen 100%.ng-viewAttribut.Haben Sie versucht, fügen Sie den folgenden css-und set Wichtiges Attribut
Dies ist höchstwahrscheinlich aufgrund der Tatsache, dass in CSS die 100% ist ein relativer Wert.
Mit einer Breite, die standardmäßig 100% ist die Breite des Bildschirms, oder was auch immer Sie suchen, bei.
Höhe jedoch nicht die Höhe des Bildschirms als 100%. Es muss ein fester Wert.
Ich denke, dass, wenn Sie ändern
mit
sollte es funktionieren.
Den 100vh sollte die Höhe des html auf die Höhe des Viewports.
Denke ich, dieser Weg funktioniert, obgleich ich sagen muss, dass ich selber nicht genutzt haben, etwas, um meine Seite zu haben, eine Höhe, die zu 100% auf dem Bildschirm.
Yay, gerenderten HTML!
class="incident"wird nur erweitert so groß wie es sein muss. Ich glaube, dein Problem beheben sollte zu machen sein , dass - element eine Höhe von 70% (weil es relativ zu der ganzen Seite) und dann incidentContainer sollte eine Höhe von 100%.Prozentsatz Höhen werden relativ zum übergeordneten element, nicht die Wurzel, so müssen Sie sich bewusst sein, alle Container, auch diejenigen, die heimlich Hinzugefügt werden, indem Sie einen Rahmen.
Auch, wenn es hilft, Jelmergu vorgeschlagen, die
vhEinheit geben. Dies könnte passen Ihre use-case - one "- Viewport-Höhe" ist äquivalent zu "1% der browser im content-Bereich". So, 100vh dauern würde, bis der gesamte Bildschirm. Dies gilt auch auf der tiefen Ebene der Kinder.