height：100％在Internet Explorer中不工作 [英] height:100% not working in Internet Explorer
本文介绍了height：100％在Internet Explorer中不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有关于Internet Explorer中的CSS属性 height：100％的问题。
I have a question about the CSS property height:100% in Internet Explorer.
height：100％在IE中不起作用，但在Firefox和Chrome中不起作用。
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">
<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中使用它？
推荐答案
在IE中，为了让元素具有 height：100％; 有 height：100％; 。
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.
如果你的css包含以下内容，它应该工作：
It should work if your css includes the following:
html,body { height:100%; }
#wrapper { height:100%; }
.section { height:100%; }
我已在IE中打开您的网页，并使用开发人员工具应用这些更改，它工作。
I've opened your page in IE and applied these changes using the developers tools and can verify that it works.
这篇关于height：100％在Internet Explorer中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
