Menu
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> </a> <a href="#third" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a></a> </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> <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: 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/
How can I get it to work in IE?
490
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.
120
In order to use height: 100%, the parent container should have a fixed height.
So for example while this should work:
<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> The following will not work:
<div style="height: 100%;"> --- same code </div> One way to achieve a fixed height when you don't know parent's height is using 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> Otherwise you could use javascript as noted in the other answer. But I prefer pure CSS solutions.
Check here for a live fiddle.
Hope that helps.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
