IE8 Körper nicht unter 100% Höhe

In meiner Anwendung, ich bin mit problem zu decken vollständig eine Seite des browser-Fenster, in IE8.

HTML:

<body class="body">
    <div class="wrapper">
        <div class="main-holder">
            <form id="Form1" runat="server">

            </form>
        </div>
    </div>
</body>

Und CSS:

.body {
    background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    -pie-background: linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    behavior: url(PIE.htc);
    height: 100%;
}
.main-holder {
    width: 1000px;
    min-height: 600px;
    margin: 10px auto;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;
    -moz-box-shadow: 10px 10px 10px #000;
    -webkit-box-shadow: 10px 10px 10px #000;
    box-shadow: 10px 10px 10px #000;
    background: -webkit-gradient(linear, left bottom, left top, from(#F8AC25), color-stop(0.05, #FFF999), color-stop(0.5, #F8AC25), color-stop(0.95, #FFF999), to(#F8AC25));
    background: -webkit-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -moz-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -ms-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: -o-linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    -pie-background: linear-gradient(top, #F8AC25, #FFF999 5%, #F8AC25, #FFF999 95%, #F8AC25);
    behavior: url(PIE.htc);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial Sans-Serif;
}

Aber im IE8 gibt es zwei weiße Streifen oben und unten auf der Seite. Und aus diesem Grund dem Körper wird nicht für die Seite vollständig, aber im Firefox tut es.

Screenshot IE8:

IE8 Körper nicht unter 100% Höhe

Screenshot Firefox:

IE8 Körper nicht unter 100% Höhe

Im IE8 ist ein offset um wrapper:

IE8 Körper nicht unter 100% Höhe

Sämtliche Informationen werden sehr hilfreich für mich.

Dank.

IE8 Körper nicht unter 100% Höhe

  • Wenn ich mich nicht Irre IE braucht, die 100% angewendet werden, um <html> und <body> tags für diese zu arbeiten.
  • Hagen Dank. Sagen Sie, dass ich sollte hinzufügen, html body{height: 100%;} ?
  • Erinnere mich, das Komma 🙂 html, body {height: 100%;}
  • Hagen Dank. Ich Tat dies, wie Sie gesagt haben, dann ist die Leiste unten verschwunden, aber es ist noch ein Streifen auf der Oberseite. Ich habe noch ein Bild, dass sagt, es ist ein offset von 10 eingestellt, um die wrapper.
  • Das ist wohl die Marge von html-oder body. Ich poste es in einer Antwort statt.
InformationsquelleAutor Tapas Bose | 2012-04-07
  1. 7

    Das Problem liegt wohl an den html-oder body-element. Versuchen Sie dies:

    html, body {
padding: 0;
margin: 0;
height: 100%;
}

    Bewusst sein, dass die Einstellung der Höhe bis zu 100% wird wahrscheinlich geben Ihnen Probleme, wenn die Website fließt aus der Leinwand, so dass die scrollbars angezeigt werden. Die Höhe wird dann immer noch 100% und wahrscheinlich Probleme mit der übergelaufen Inhalt.

    • Ich habe html, body { height:100%; font-family: Arial, Sans-Serif; margin: 0; padding: 0; }, aber das problem besteht immer noch.
    • Ja ich sehe die eine mehr, die es verursachen könnten: .main-Halter schiebt mit margin: 10px was könnte schieben auf Körper, verwenden padding: 10px 0 im Körper, um den Effekt zu erzielen statt
    • Vielen Dank, es funktioniert. Aber als Sie erwähnte, dass Ihr vielleicht Probleme mit dem übergelaufen Inhalt, es passiert, wenn ich die Größe des Browsers. Ich habe ein anderes Bild. Gibt es eine turn-around-Weg? Ich wirklich schätzen Ihre Hilfe.
    • overflow: scroll könnte sparen Sie, wenn Sie Glück haben, aber generell sollten Sie vermeiden, statische Höhen wie die. Wenn Sie nicht besorgt über die Abwärtskompatibilität schlage ich vor, Sie min-height für den Körper zu vermeiden.
    • Ich danke Ihnen sehr. So ist die Lösung: html, body {height:100%;} body{min-height: 810px;/* Da die min-Höhe des main-Halter ist 800px + 10px*/}. Es arbeitete. 🙂
    • Einstellung der min-height nicht lösen das problem der überlauf. Ich verwendet javascript um dieses Problem zu lösen. $(document).ready(function () { setInterval(adjustBodyHeight, 100); }); var adjustBodyHeight = function () { var wrapperHeight = $('.wrapper').height(); $('.Körper').Höhe(wrapperHeight + 10 + "px"); }

    InformationsquelleAutor Andreas Hagen
  2. 2

    Ihre Höhe von 100% angewendet werden muss, um sowohl die HTML-und BODY-tags:

    html, body { height: 100%; }

    Hier einige weitere Informationen!

    • Vielen Dank für die Antwort. Nach der Verwendung dieses die untere Leiste ist Weg, aber es ist immer noch ein top-Streifen. Sie sehen im letzten Bild gibt es einen Versatz von 10 eingestellt, um die wrapper
    InformationsquelleAutor cereallarceny
  3. 1

    versuchen, diese

    body
{
    overflow: scroll;
}
    InformationsquelleAutor Logan
Schreibe einen Kommentar