我有一个关于CSS属性高度的问题：Internet Explorer中的100％。
高度：100％在IE中不起作用，但在Firefox和Chrome中不起作用。
HTML文件：
<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文件：
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;
}
演示：http://ealtinel.com/height/
如何让它在IE上工作？
