Вышыня: 100% не працуе ў Internet Explorer

У мяне ёсць пытанне аб CSS ўласцівасці вышыня: 100% у Internet Explorer.

height:100% does not work in IE, but it does in Firefox and Chrome.

HTML файл:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


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

<body>
    <div id="menu_neu">
        
    </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;">
                         

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s1Pfeil1" style="padding-top:120px;padding-left:255px;"> Next

                        </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;">
                            

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s1Pfeil2" style="padding-top:200px;padding-left:225px;">   Next    Next  
                        </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;">
                            

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s1Pfeil3" style="padding-top:200px;padding-left:225px;">   Next

                        </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;">
                            

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s2Pfeil1" style="padding-top:-50px;padding-left:305px;"> Next

                        </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;">
                            

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s2Pfeil2" style="padding-top:80px;padding-left:305px;">Next  Next
                        </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;">
                            

HEIGHT 100% works in Chrome and Firefox,
but not in IE!

                        <div id="s2Pfeil3" style="padding-top:100px;padding-left:225px;">   Next

                        </div>
                    </div>
                </div>
                <!--.story-->
            </div>
            <!--#third-->
        </div>
        <!--/section-2-->
    </div>
    <!--/wrapper-->
    <div class="suche">
        <form class="search" action="" method="post">
            
            <input id="search-box" type="text" name="search" onclick="search_bigger();" onblur="search_smaller();">
        </form> <div class="herz"></div><div class="telefon"></div>

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

CSS файл:

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/

Як я магу прымусіць яго працаваць у IE?

22
Дзе ваш доктайп ?
дададзена аўтар Vucko, крыніца
@ Aldimeola1122 ды, пакласці у самога пачатак. Прыклад
дададзена аўтар Vucko, крыніца
Ваш першы <meta> павінен ісці ўнутры <head> , як добра!
дададзена аўтар Sirko, крыніца
Што вы спрабуеце дасягнуць?
дададзена аўтар Savas Vedova, крыніца
Паспрабуйце вышыню: аўто;
дададзена аўтар Anna.P, крыніца
Прывітанне Aldimeola .... ваша праблема з тэга малюнка (Прыклад: ). У IE яго працуе нармальна, калі я выдаліць тэг выявы ... Праблема ў пазіцыянаванні малюнка.
дададзена аўтар Anna.P, крыніца
зрабіць HTML, цела {вышыня: 100%} і адзначце вышыню сядзенні: аўто; (Прыклад: #wrapper {вышыня: аўто;}) у вашым CSS
дададзена аўтар Anna.P, крыніца
ealtinel.com/height ён працуе не ў IE
дададзена аўтар aldimeola1122, крыніца
На жаль, да гэтага часу не працуе
дададзена аўтар aldimeola1122, крыніца
я павінен выкарыстоўваць?
дададзена аўтар aldimeola1122, крыніца
да гэтага часу не працуе
дададзена аўтар aldimeola1122, крыніца
я змяніўся, але ён працуе не :(
дададзена аўтар aldimeola1122, крыніца

8 адказы

У IE, для таго, каб элемент, каб мець вышыня: 100%; , усе бацькоўскія элементы павінны мець Вышыня: 100%; . Любы перапынак у «ланцужку» прымусіць IE ігнараваць усе.

Ён павінен працаваць, калі ваш CSS ўключае ў сябе наступнае:

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

Я адкрыў сваю старонку ў IE і ужыў гэтыя змены з выкарыстаннем інструментаў распрацоўшчыкаў і можа пераканацца, што ён працуе.

32
дададзена
@ Aldimeola1122 вам трэба паставіць #wrapper {вышыня: 100%; } назад у
дададзена аўтар snumpy, крыніца
ealtinel.com/height няма :)
дададзена аўтар aldimeola1122, крыніца

Для таго, каб выкарыстоўваць вышыня: 100% , бацькоўскі кантэйнер павінен мець фіксаваную вышыню.

Так, напрыклад, у той час як гэта павінна працаваць:

<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>

Ніжэй не будзе працаваць:

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

Адным са спосабаў дасягнення фіксаванай вышыні, калі вы не ведаеце, вышыня аднаго з бацькоў выкарыстоўваецца становішча: абсалютны; .

<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>

У адваротным выпадку вы можаце выкарыстоўваць JavaScript, як паказана ў іншы адказ. Але я аддаю перавагу чыстыя CSS рашэння.

Праверце тут для жывой скрыпкі.

Надзея, што дапамагае.

12
дададзена
@SavasVedova ня на мой старэйшы Dev. Ён хоча, каб усё было падтрымліваецца.
дададзена аўтар Lara Belle, крыніца
ня @SavasVedova працуе ў IE6 :(
дададзена аўтар Lara Belle, крыніца
@LaraBelle, прабачце, я не ёсць інструменты, каб праверыць гэта значыць 6. Можа быць, вы павінны паспрабаваць налады вышыня 100% ад кожнага бацькі, ці вы можаце выкарыстоўваць JavaScript, каб усталяваць вышыню (думаю, гэта простае рашэнне).
дададзена аўтар Savas Vedova, крыніца
@LaraBelle Я думаю, што браўзэр быў мёртвы 10 гадоў таму :)
дададзена аўтар Savas Vedova, крыніца
@ Aldimeola1122 шкада, што я прапусціў свой каментар ... Я толькі што бачыў яго, але спасылка мёртвая.
дададзена аўтар Savas Vedova, крыніца
Вы можаце сказаць мне, што я раблю няправільна ealtinel.com/height
дададзена аўтар aldimeola1122, крыніца

Для таго, каб зрабіць яго працу. Вы павінны зрабіць бацькоўскі HTML і дзіцяці, каб мець той жа attributes.In некаторых выпадках вы павінны выкарыстоўваць пікселі для таго, каб яна функцыянавала.

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

У мяне таксама ёсць нешта добрае

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
дададзена

Я паспрабаваў некалькі рэчаў, і гэта, здаецца, рашэнне:

Дадайце наступны мета-тэг у галаўны часткі вашага HTML-дакумента:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >

Здаецца, калі IE аўтаматычна ўключаецца рэжым сумяшчальнасці для (IE) версіі 7. Гэта мета-тэг прымушае IE, каб усталяваць рэжым сумяшчальнасці з 10-ай версіі ИЭ. Гэта рашэнне працуе толькі ў IE версіі 10 ці вышэй.

Поспехаў!

1
дададзена

Я ведаю, што гэты пост стары, але ён усё яшчэ можа быць карысным для некаторых людзей. У мяне была праблема з выявай на IE. Выява было ўласцівасць «макс-шырыня: 100%», і ён будзе выдатна працаваць на Chrome, але не ва ўсіх на IE.

Тое, што я проста зрабіў малюнак наносіцца шырыню і максімальную шырыню. Было б нешта накшталт:

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

І гэта спрацавала для мяне: d`

`

1
дададзена
Ваш «адказ» не мае нічога агульнага з пытаннем. Ва ўсякім разе, гэта каментар і належыць у раздзеле каментароў па гэтым пытанні. Нават тады, гэта не па тэме.
дададзена аўтар Rob, крыніца

Паспрабуйце гэты код

мяжа дно: 1px цвёрды/* любы колер, які адпавядае вашай канструкцыі * /

1
дададзена

Я сутыкнуўся з той жа праблемай з адным з маіх праектаў, а таксама, але не змог знайсці рашэнне, як шырыня: 100% працаваў, але не вышыня . Таму я выкарыстаў маленькую хітрасць, каб абгарнуць маю старонку ўнутры DIV і абнавіць вышыню DIV з дапамогай JavaScript.

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

І звязаныя, што да падзеі.

0
дададзена

If you don't enter the height property, it will be sized proportionally to the width. style="height: 25%; width: 25%; object-fit: contain" doesn't work in IE style="width: 25%; object-fit: contain" works in IE and sized height at 25%

0
дададзена