Ich habe eine einfache Webseite mit einigen Lipsum-Inhalten, die auf der Seite zentriert sind. Die Seite funktioniert gut in Chrome und Firefox. Wenn ich die Größe des Fensters verkleinere, füllt der Inhalt das Fenster, bis es nicht mehr möglich ist, und fügt dann eine Bildlaufleiste hinzu und füllt den Inhalt außerhalb des Bildschirms nach unten.
Die Seite wird jedoch nicht in IE11 zentriert. Ich kann die Seite im IE zentrieren, indem ich den Körper biege. Wenn ich dies jedoch tue, wird der Inhalt vom Bildschirm nach oben verschoben und schneidet den oberen Rand des Inhalts ab.
Nachfolgend sind die beiden Szenarien aufgeführt. Siehe die zugehörigen Geigen. Wenn das Problem nicht sofort erkennbar ist, reduzieren Sie die Größe des Ergebnisfensters, sodass eine Bildlaufleiste generiert werden muss.
Hinweis: Diese Anwendung zielt nur auf die neuesten Versionen von Firefox, Chrome und IE (IE11) ab, die alle die Kandidatenempfehlung von Flexbox unterstützen. Daher sollte die Funktionskompatibilität (theoretisch) kein Problem darstellen.
Bearbeiten : Wenn Sie die Vollbild-API zum Vollbild des äußeren Bereichs verwenden, zentrieren alle Browser korrekt mit dem ursprünglichen CSS. Beim Verlassen des Vollbildmodus wird der IE jedoch wieder horizontal zentriert und vertikal oben ausgerichtet.
Bearbeiten : IE11 verwendet eine nicht herstellerspezifische Implementierung von Flexbox. Aktualisierungen des Layouts der flexiblen Box ("Flexbox")
Zentriert und ändert die Größe in Chrome / FF korrekt, zentriert nicht, ändert jedoch die Größe in IE11 korrekt
Geige: http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Zentriert überall korrekt und schneidet bei Verkleinerung von oben ab
Geige: http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
quelle
-ms-flexbox
für IE verwenden ..Antworten:
Ich habe festgestellt, dass der Browser Probleme hat, innere Container vertikal auszurichten, wenn nur der Mindesthöhenstil festgelegt ist oder wenn der Höhenstil überhaupt fehlt. Was ich getan habe, war, einen Höhenstil mit einem gewissen Wert hinzuzufügen, und das behebt das Problem für mich.
zum Beispiel :
Jetzt haben wir also einen Höhenstil, aber die Mindesthöhe wird ihn überschreiben. Auf diese Weise ist dh glücklich und wir können immer noch Min-Höhe verwenden.
Hoffe das ist hilfreich für jemanden.
quelle
-ms-flex-align:center;
für IE10. Unterstützung füralign-items
wurde nur in IE11 hinzugefügt .min-height
überschreibt zwar dieheight
Regel, aber wenn der Inhalt den überschreitet, erstrecktmin-height
er sich einfach über die Grenzen hinaus. Die Antwort von @ericodes löst dieses Problem und die Lösung funktioniert auf allen Browsern, die Flex unterstützen.Versuchen Sie, das Div, mit dem Sie Flexboxed haben,
flex-direction: column
in einen Container zu verpacken, der ebenfalls Flexboxed enthält.Ich habe dies gerade in IE11 getestet und es funktioniert. Eine seltsame Lösung, aber bis Microsoft die interne Fehlerbehebung extern macht ... muss es reichen!
HTML:
CSS:
2 Beispiele zum Testen in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
quelle
min-height
anstelle einer hartenheight
Regel, während sie sich weiterhin vertikal auf alle Browser konzentriert, die die Verwendung von unterstützendisplay: flex
.display:flex
wird auf dem Wrapper benötigt, und möglicherweise eines davon auf dem Kind:width: 100%
flex-basis:100%
flex-grow:1
abhängig von Ihrem Inhalt / Stil.align-items
ist. Sie müssen die ursprüngliche Flexbox mit einer Flexbox ohne diese Eigenschaft umschließen.align-items
Eigenschaft (FlexContainerWrapper) umwickeln?Hier ist meine Arbeitslösung (SCSS):
quelle
Nur für den Fall, dass jemand mit dem gleichen Problem wie ich hierher kommt, das in früheren Kommentaren nicht speziell angesprochen wurde.
Ich hatte
margin: auto
auf dem inneren Element, was dazu führte, dass es am Boden des übergeordneten Elements (oder des äußeren Elements) klebte. Was es für mich behoben hat, war die Änderung der Marge aufmargin: 0 auto;
.quelle
Dies ist ein bekannter Fehler, der anscheinend intern bei Microsoft behoben wurde.
https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
quelle
Die ursprüngliche Antwort von https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042
quelle
Ich habe beide Geigen aktualisiert. Ich hoffe, es wird Ihre Arbeit erledigen.
Zentrierung
zentrieren und scrollen
quelle
Ich habe nicht viel Erfahrung damit,
Flexbox
aber es scheint mir, dass die erzwungene Höhe der Tagshtml
und dazu führt,body
dass der Text beim Ändern der Größe oben verschwindet. Ich konnte nicht im IE testen, fand aber den gleichen Effekt in Chrome.Ich gabelte deine Geige und entfernte die
height
undwidth
Erklärungen.Es schien auch so, als
flex
müssten die Einstellungen auf andereflex
Elemente angewendet werden. Wenn ich mich jedochdisplay: flex
auf die.inner
verursachten Probleme beziehe, setze ich explizit das.inner
aufdisplay: block
und das.outer
aufflex
für die Positionierung.Ich habe die Mindesthöhe festgelegt
.outer
, um das Ansichtsfenster zu füllendisplay: flex
, und die horizontale und vertikale Ausrichtung festgelegt:Ich
.inner
habedisplay: block
explizit eingestellt. In Chrome, es sah aus wie es geerbtflex
aus.outer
. Ich habe auch die Breite eingestellt:Dies hat das Problem in Chrome behoben, hoffentlich auch in IE11. Hier ist meine Version der Geige: http://jsfiddle.net/ToddT/5CxAy/21/
quelle
Wir haben eine gute Lösung gefunden, was für mich funktioniert hat. Überprüfen Sie diesen Link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100. Zuerst fügen wir ein übergeordnetes Div hinzu, zweitens ändern wir die Mindesthöhe: 100% in Min. Höhe: 100vh. Es wirkt wie ein Zauber.
quelle
Wenn Sie die Breite und Höhe des übergeordneten Elements definieren können, können Sie das Bild einfacher zentralisieren, ohne einen Container dafür erstellen zu müssen.
Wenn Sie die minimale Breite definieren, erkennt der IE aus irgendeinem Grund auch die maximale Breite.
Diese Lösung funktioniert für IE10 +, Firefox und Chrome.
https://jsfiddle.net/HumbertoMendes/t13dzsmn/
quelle