it-swarm.com.de

höhe: 100% funktioniert nicht im Internet Explorer

Ich habe eine Frage zur CSS-Eigenschaft height:100% im Internet Explorer.

height:100% funktioniert nicht im IE, aber in Firefox und Chrome.

HTML-Datei: 

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<html style="height:100%;">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <div id="menu_neu">
        <ul id="topNav">
            <li class="current"><a href="#section-1">SECTION 1</b></a>
            </li>
            <li><a href="#section-2">SECTION 2 </b></a>
            </li>
        </ul>
    </div>
    <div id="wrapper">
        <!--SECTION- 1 .....................................................................................................................................-->
        <div class="section" id="section-1">SECTION - 1
            <div style="height:100%;" id="intro">
                <div class="story">
                    <div class="bg1"></div>
                    <div class="bg2"></div>
                    <div class="bg3"></div>
                    <div class="float-left" style="margin-top:120px; width:500px;">
                         <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s1Pfeil1" style="padding-top:120px;padding-left:255px;"> <a href="#second" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a>

                        </div>
                        <!--/box-links-->
                    </div>
                    <!--/float-left-->
                </div>
                <!--./story-->
            </div>
            <!--/intro-->
            <div style="height:100%;" id="second">
                <div class="story">
                    <div class="bg1_2"></div>
                    <div class="bg2_2"></div>
                    <div class="bg3_2"></div>
                    <div class="float-right" style="margin-top:45px; width:500px;">
                            <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s1Pfeil2" style="padding-top:200px;padding-left:225px;">   <a href="#intro" title="Before Section"><img src="images/icon_up_normal.png" alt="Next" /></a>&nbsp;&nbsp;</a>  <a href="#third" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a></a>&nbsp;&nbsp;</a>
                        </div>
                        <!--/box-links1-->
                    </div>
                    <!--/float-right-->
                </div>
                <!--./story-->
            </div>
            <!--#second-->
            <div id="third" style="height:100%;">
                <div class="story">
                    <div class="bg1_3"></div>
                    <div class="bg2_3"></div>
                    <div class="bg3_3"></div>
                    <div class="float-left" style="margin-top:80px; width:500px;">
                            <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s1Pfeil3" style="padding-top:200px;padding-left:225px;">   <a href="#second" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a>

                        </div>
                        <!--/box-links2-->
                    </div>
                    <!--/float-left-->
                </div>
                <!--.story-->
            </div>
            <!--#third-->
        </div>
        <!--/section1-->
        <!--SECTION- 2 BRANDSTIFTER..................................................................................................................................-->
        <div class="section" id="section-2">SECTION -2
            <div id="intro_bs">
                <div class="story_bs">
                    <div class="bg1_bs"></div>
                    <div class="bg2_bs"></div>
                    <div class="bg3_bs"></div>
                    <div class="float-left_bs" style="margin-top:50px; width:600px;">
                            <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s2Pfeil1" style="padding-top:-50px;padding-left:305px;"> <a href="#second_bs" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a>

                        </div>
                        <!--/box-links-->
                    </div>
                    <!--/float-left_bs-->
                </div>
                <!--.story-->
            </div>
            <!--#intro-->
            <div id="second_bs">
                <div class="story_bsc">
                    <div class="bg1_2_bs"></div>
                    <div class="bg2_2_bs"></div>
                    <div class="bg3_2_bs"></div>
                    <div class="float-right_bs" style="margin-top:120px; width:500px;">
                            <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s2Pfeil2" style="padding-top:80px;padding-left:305px;"><a href="#intro_bs" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a>&nbsp;&nbsp;<a href="#third_bs" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a>
                        </div>
                    </div>
                </div>
                <!--.story-->
            </div>
            <!--#second-->
            <div id="third_bs">
                <div class="story_bsc">
                    <div class="bg1_3_bs"></div>
                    <div class="bg2_3_bs"></div>
                    <div class="bg3_3_bs"></div>
                    <div class="float-right_bs" style="margin-top:120px; width:500px;">
                            <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2>

                        <div id="s2Pfeil3" style="padding-top:100px;padding-left:225px;">   <a href="#second_bs" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a>

                        </div>
                    </div>
                </div>
                <!--.story-->
            </div>
            <!--#third-->
        </div>
        <!--/section-2-->
    </div>
    <!--/wrapper-->
    <div class="suche">
        <form class="search" action="" method="post">
            <label for="search-box">Search:</label>
            <input id="search-box" type="text" name="search" onclick="search_bigger();" onblur="search_smaller();">
        </form> <a href="http://www.facebook.com/BrandortMarketingKommunikationsGmbh" title="Werde Fan von Brandort. auf Facebook" alt="Werde Fan von Brandort. auf Facebook" target="_blank"><div class="herz"></div></a><a href="images/icon_quicklinks_phone_hover_big.png" rel="lightbox" title="So erreichen Sie uns" alt="So erreichen Sie uns"><div class="telefon"></div></a>

    </div>
    <div class="css-panes">
        <div style="display: block;"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

CSS-Datei: 

html{
    height:100%;
}

body{
    font-family: 'universal_light';
    margin: 0;
    min-width: 980px;
    padding: 0;
    line-height:2em;
    background-color: #f6aa27;
    height: 100%;

}

p{
    margin: 0 0 20px 0; 
}

p, ul{
    font-family:'universal_light';
    font-weight:normal;
    font-size:16px;
}

img{
    border: 0;
}

h1, #pixels{
    font-family:"Museo 900", Verdana, serif;
    font-size-adjust:0.40;
    font-weight:700;
    font-style:normal;
}

h2{
    font-family: 'universal_black';
    color:#000000;
    font-size:30px;
    font-weight:normal;
}

#wrapper{
    height: 100%;
}

#header h1, #pixels{
    color: #48941A;
}



#nav{
    list-style: none;
    position: fixed;
    right: 20px;
}

#nav li{
    margin: 0 0 15px 0; 
}

#nav_bs{
    list-style: none;
    position: fixed;
    right: 20px;
}

#nav_bs li{
    margin: 0 0 15px 0; 
}

#nav_bsa{
    list-style: none;
    position: fixed;
    right: 20px;
}

#nav_bsa li{
    margin: 0 0 15px 0; 
}

#header, #intro, #second{
    width: 100%;
}



/*hier wurde "fix" nach der "no-repeat" gelöscht*/
#intro{
    background-color:#f6aa27;
    margin: 0 auto;
    padding: 0;
    height: 1200px;
    width:100%;
    border-style:solid;
    border-width:5px;

}



/*hier wurde "fix" nach der "no-repeat" gelöscht*/
#intro .bg1{

    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;
    margin-top: -26px;
    margin-left: 66px;

}
/*hier wurde "fix" nach der "no-repeat" gelöscht*/
#intro .bg2{

    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}
#intro .bg3{
    background: url(images/kohle.png) 50% 0 no-repeat fixed;
    width: 1000px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}

#second{
    background:url(images/bg1.jpg) 50% 0 no-repeat;
    background-color:#f6aa27;
    color: #D3D3D3;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-style:solid;
    border-width:5px;
}

#section-2{
background-color:#D3D3D3;
}

#second .bg1_2{
    background:url(images/second/feurig.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;
    margin-left: 143px;
    margin-top: -10px;

}

#second .bg2_2{
    background:url(images/second/handschrift.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}

#second .bg3_2{
    background:url(images/second/brandeisen.png) 50% 0 no-repeat fixed;
    width: 900px;
    position: absolute;
    height: 100%;
    margin: 0 auto;
    padding: 0;

}


#third{
    background:url(images/bg1.jpg) 50% 0 no-repeat;
    background-color:#f6aa27;
    color: #000000;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
        border-style:solid;
    border-width:5px;
}

#third .bg1_3{
    background:url(images/third/handschrift.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}
#third .bg2_3{
    background:url(images/third/feurig.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;
}

#third .bg3_3{
    background:url(images/third/seil.png) 50% 0 no-repeat fixed;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;
}

#fifth{
    background: #ccc;
    height: 400px;
    margin: 0 auto;
    padding: 40px 0 0 0;
}



#header, #intro_bs, #second_bs{
    width: 100%;
}

#intro_bs{
    background:url(images/bg2.jpg) 50% 0 no-repeat;
    background-color:#c9cacc;
    color: #000000;
    height: 900px;
    margin: 0 auto;
    padding: 0;
        border-style:solid;
    border-width:5px;

}

#intro_bs .bg1_bs{
    background:url(images/intro_bs/mitarbeiter.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}

#intro_bs .bg2_bs{
    background:url(images/intro_bs/feurig.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}
#intro_bs .bg3_bs{
    background:url(images/intro_bs/handschrift.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;
}

#second_bs{
    background:url(images/bg2.jpg) 50% 0 no-repeat;
    background-color:#c9cacc;
    color: #000000;
    height: 950px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
        border-style:solid;
    border-width:5px;
}

#second_bs .bg1_2_bs{
    background:url(images/second_bs/feurig.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}

#second_bs .bg2_2_bs{
    background:url(images/second_bs/handschrift.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}

#second_bs .bg3_2_bs{
    background:url(images/second_bs/steffen.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 950px;
    margin: 0 auto;
    padding: 0;
    margin-left: -121px;


}


#third_bs{
    background:url(images/bg2.jpg) 50% 0 no-repeat;
    background-color:#c9cacc;
    color: #000000;
    height: 950px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
        border-style:solid;
    border-width:5px;
}

#third_bs .bg1_3_bs{
    background:url(images/third_bs/feurig.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}
#third_bs .bg2_3_bs{
    background:url(images/third_bs/handschrift.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 900px;
    margin: 0 auto;
    padding: 0;

}
#third_bs .bg3_3_bs{
    background:url(images/third_bs/mike.png) 50% 0 no-repeat;
    width: 900px;
    position: absolute;
    height: 950px;
    margin: 0 auto;
    padding: 0;
    margin-left: -121px;
    margin-top: -287px;
}




.story{
    margin: 0 auto;
    min-width: 980px;
    overflow: auto;
    width: 980px;

}

.story .float-left, .story .float-right{
    padding: 100px 0 0 0;
    position: relative;
    width: 350px;   
}


.linkp1 a {
    background:url('images/brandort_norm.gif') 0 0 no-repeat fixed;
    /*height: 12px;
    width: 95px;*/
    display: block;
    z-index:11111;
}

.linkp1 a:hover {
    background:url('images/brandort_hover.gif') 0 0 no-repeat fixed;
}


.linkp2 a {
    background:url('images/brandstifter_norm.gif') no-repeat fixed;
    /*height: 12px;
    width: 95px;*/
    display: block;
    z-index:11111;
}

.linkp2 a:hover {
    background:url('images/brandstifter_hover.gif') no-repeat fixed;
}

.linkp3 a {
    background:url('images/brandsaetze_norm.gif') no-repeat fixed;
    /*height: 12px;
    width: 95px;*/
    display: block;
    z-index:11111;
}

.linkp3 a:hover {
    background:url('images/brandsaetze_hover.gif') no-repeat fixed;
}

.linkp4 a {
    background:url('images/brandschaetze_norm.gif') no-repeat fixed;
    /*height: 12px;
    width: 95px;*/
    display: block;
    z-index:11111;
}

.linkp4 a:hover {
    background:url('images/brandschaetze_hover.gif') no-repeat fixed;
}

.linkp5 a {
    background:url('images/brandpunkt_norm.gif') no-repeat fixed;
    /*height: 12px;
    width: 95px;*/
    display: block;
    z-index:11111;
}

.linkp5 a:hover {
    background:url('images/brandpunkt_hover.gif') no-repeat fixed;
}




#menu_neu {
height: 40px;
width: 1200px;
text-align: center;
line-height:1em!important;
position: fixed;
left: 40%;
width: 640px;
z-index: 10000;
}

ul#topNav{
    margin-top:51px;
    margin-left: -218px;
    color:#000000;
}

ul#topNav li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
    margin-top: 50%;
}

ul#topNav a, ul#topNav span {
    float: left;
    margin-right: 0.4em;
    margin-left: 0.1em;
    padding: 0.2em 1em;
    text-decoration: none;
    color:#000000;
    font-size:14px;
}

* html ul#topNav a, * html ul#topNav span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    wi\dth: 6em;
}

ul#topNav a:hover, ul#topNav span {
    color:#000000;
    font-size:14px;
}

ul#topNav a:active {
    color:#000000;
    font-size:14px;
}

ul#topNav div {
     clear: left;
}

#topNav .current a {
    color:#F45D32;
}

Demo: http://ealtinel.com/height/

Wie kann ich es in IE arbeiten lassen?

23
aldimeola1122

Damit ein Element über height:100%; verfügt, müssen alle übergeordneten Elemente über height:100%; verfügen. Jeder Bruch in der "Kette" führt dazu, dass IE alles ignoriert.

Es sollte funktionieren, wenn Ihre CSS Folgendes enthält:

html,body { height:100%; } 
#wrapper { height:100%; }
.section { height:100%; }

Ich habe Ihre Seite in IE geöffnet und diese Änderungen mit den Entwicklertools angewendet und kann überprüfen, ob sie funktioniert.

34
snumpy

Um height: 100% verwenden zu können, sollte der übergeordnete Container eine feste Höhe haben.

So zum Beispiel während dies funktionieren sollte:

<div style="height: 400px;">
    <div style="height: 100%; background: red; float: left; width: 200px;">
        Left Column
    </div>
    <div style="height: 100%; margin-left: 210px;">
        Right Column
    </div>
</div>

Folgendes wird nicht funktionieren:

<div style="height: 100%;">
    --- same code
</div>

Eine Möglichkeit, eine feste Höhe zu erreichen, wenn Sie die Höhe der Eltern nicht kennen, ist position: absolute;

<div style="position: relative;">
    <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 200px; background: red;">
        Left Column
    </div>
    <div style="margin-left: 210px;">
        Right Column
    </div>
</div>

Ansonsten können Sie Javascript verwenden, wie in der anderen Antwort angegeben. Ich bevorzuge reine CSS-Lösungen.

Überprüfen Sie hier für eine Live-Geige.

Hoffentlich hilft das.

12
Savas Vedova

Damit es funktioniert. Sie müssen die übergeordnete HTML-Datei und das untergeordnete Element so einrichten, dass sie dieselben Attribute haben. In einigen Fällen müssen Sie Pixel verwenden, damit sie funktioniert.

html,body, \\ this has to go to every element you want to have a height 100% 
{
  height:100%;
}

Ich habe auch etwas Nettes

window.onload=function(){
if(navigator.appName == "Microsoft Internet Explorer"){ \\ to detect if the browser used by the client is IE
winHight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+winHeight+";");
}
}
2
NULL-POINTER

Versuchen Sie diesen Code

rahmen unten: 1px einfarbig/* jede Farbe, die zu Ihrem Design passt * /

1
Ḿichael

Ich hatte auch ein Problem mit einem meiner Projekte, konnte aber keine Lösung finden, da width: 100% funktionierte, aber nicht height. Also habe ich einen kleinen Trick benutzt, um meine Seite in eine div zu packen und die Höhe des Div mit JavaScript zu aktualisieren.

windowHeight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+windowHeight+";");

Und das mit einer Veranstaltung verbunden.

0
abhishekgarg

Wenn Sie die height -Eigenschaft nicht eingeben, wird sie proportional zur Breite . Style = "height: 25%; width: 25%; object-fit: contain" funktioniert nicht im IE style = "width: 25%; object-fit: contain" arbeitet in IE und die Größenhöhe bei 25%

0

Ich weiß, dass dieser Beitrag alt ist, aber für manche Menschen könnte er dennoch nützlich sein. Ich hatte ein Problem mit einem Bild im IE. Das Bild hatte die Eigenschaft "max-width: 100%" und würde unter Chrome einwandfrei funktionieren, unter IE jedoch überhaupt nicht. 

Was ich einfach mit dem Bild gemacht habe, ist eine Breite UND eine Max-Breite . Es würde ungefähr so ​​aussehen:

 img.logo {
        width:100%;
        max-width:1600px;
    }

Und es hat für mich funktioniert: D`

`

0
Bano