Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - height:100% not working in Internet Explorer

0 votes
196 views
in Technique[技术] by (71.8m points)

html - height:100% not working in Internet Explorer

I have a question about the CSS property height:100% in Internet Explorer.

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

HTML File : 

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

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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

In IE, in order for an element to have height:100%;, all parent elements must have height:100%;. Any break in the "chain" will cause IE to ignore everything.

It should work if your css includes the following:

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

I've opened your page in IE and applied these changes using the developers tools and can verify that it works.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...