高度:100% 在 Internet Explorer 中不起作用 - IT屋-程序员软件开发技术分享社区
首页 前端开发 高度:100% 在 Internet Explorer 中不起作用
高度:100% 在 Internet Explorer 中不起作用
[英] height:100% not working in Internet Explorer
本文介绍了高度:100% 在 Internet Explorer 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 Internet Explorer 中的 CSS 属性 height:100% 有疑问.
height:100% 在 IE 中不起作用，但在 Firefox 和 Chrome 中起作用.
HTML 文件:
<div id="包装器"><!--Section- 1 .....................................…………………………………………………………………………………………………………………………………………………………......................................................--><div class="section" id="section-1">SECTION - 1<div style="height:100%;"id="介绍"><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% 适用于 Chrome 和 Firefox，<br><b>但不在 IE 中！</b></h2><div id="s1Pfeil1" style="padding-top:120px;padding-left:255px;"><a href="#second" title="下一节"><img src="images/icon_down_normal.png" alt="Next"/></a>
<!--/box-links-->
<!--/float-left-->
<!--./story-->
<!--/介绍--><div style="height:100%;"id="第二个"><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% 适用于 Chrome 和 Firefox，<br><b>但不在 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="下一节"><img src="images/icon_down_normal.png" alt="Next"/></a></a> </a>
<!--/box-links1-->
<!--/float-right-->
<!--./story-->
<!--#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% 适用于 Chrome 和 Firefox，<br><b>但不在 IE 中！</b></h2><div id="s1Pfeil3" style="padding-top:200px;padding-left:225px;"><a href="#second" title="下一节"><img src="images/icon_up_normal.png" alt="Next"/></a>
<!--/box-links2-->
<!--/float-left-->
<!--.故事-->
<!--#第三-->
<!--/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% 适用于 Chrome 和 Firefox，<br><b>但不在 IE 中！</b></h2><div id="s2Pfeil1" style="padding-top:-50px;padding-left:305px;"><a href="#second_bs" title="下一节"><img src="images/icon_down_normal.png" alt="下一步"/></a>
<!--/box-links-->
<!--/float-left_bs-->
<!--.故事-->
<!--#介绍--><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% 适用于 Chrome 和 Firefox，<br><b>但不在 IE 中！</b></h2><div id="s2Pfeil2" style="padding-top:80px;padding-left:305px;"><a href="#intro_bs" title="下一节"><img src="images/icon_up_normal.png" alt="Next"/></a> <a href="#third_bs" title="下一节"><img src="images/icon_down_normal.png" alt="下一个"/></a>
<!--.故事-->
<!--#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% 适用于 Chrome 和 Firefox，<br><b>但不在 IE 中！</b></h2><div id="s2Pfeil3" style="padding-top:100px;padding-left:225px;"><a href="#second_bs" title="下一节"><img src="images/icon_up_normal.png" alt="下一个"/></a>
<!--.故事-->
<!--#第三-->
<!--/section-2-->
<!--/wrapper--><div class="suche"><form class="search" action="" method="post"><label for="search-box">搜索:</label><input id="search-box" type="text" name="search" onclick="search_bigger();"onblur="search_smaller();"></表单><a href="http://www.facebook.com/BrandortMarketingKommunikationsGmbh" title="Werde Fan von Brandort.auf Facebook" alt="Werde Fan von Brandort.auf Facebook" target="_blank"><divclass="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="电话"></div></a>
<div class="css-panes"><div style="display: block;"></div><div></div><div></div><div></div><div></div><div></div>
CSS 文件:
html{高度:100%；}身体{字体系列:'universal_light'；边距:0；最小宽度:980px；填充:0；行高:2em；背景颜色:#f6aa27；高度:100%；}p{边距:0 0 20px 0；}p, ul{字体系列:'universal_light'；字体粗细:正常；字体大小:16px；}图片{边框:0；}h1，#像素{font-family:"Museo 900", Verdana, serif;字体大小调整:0.40；字体粗细:700；字体样式:正常；}h2{字体系列:'universal_black'；颜色:#000000；字体大小:30px；字体粗细:正常；}#包装{高度:100%；}#header h1, #pixels{颜色:#48941A；}#导航{列表样式:无；位置:固定；右:20px；}#导航李{边距:0 0 15px 0；}#nav_bs{列表样式:无；位置:固定；右:20px；}#nav_bs李{边距:0 0 15px 0；}#nav_bsa{列表样式:无；位置:固定；右:20px；}#nav_bsa li{边距:0 0 15px 0；}#header, #intro, #second{宽度:100%；}/*hier wurde "fix" nach der "no-repeat" gelöscht*/#介绍{背景色:#f6aa27;边距:0 自动；填充:0；高度:1200px；宽度:100%；边框样式:实心；边框宽度:5px；}/*hier wurde "fix" nach der "no-repeat" gelöscht*/#介绍.bg1{宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；边距顶部:-26px；左边距:66px；}/*hier wurde "fix" nach der "no-repeat" gelöscht*/#介绍.bg2{宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#介绍.bg3{背景:url(images/kohle.png) 50% 0 无重复固定；宽度:1000px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#第二{背景:url(images/bg1.jpg) 50% 0 不重复；背景色:#f6aa27;颜色:#D3D3D3；高度:100%；最小高度:100%；边距:0 自动；填充:0；溢出:隐藏；边框样式:实心；边框宽度:5px；}#section-2{背景色:#D3D3D3;}#第二个.bg1_2{背景:url(图像/秒/feurig.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；左边距:143px；边距顶部:-10px；}#第二个.bg2_2{background:url(images/second/handschrift.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#第二个.bg3_2{背景:url(images/second/brandeisen.png) 50% 0 无重复固定；宽度:900px；位置:绝对；高度:100%；边距:0 自动；填充:0；}#第三{背景:url(images/bg1.jpg) 50% 0 不重复；背景色:#f6aa27;颜色:#000000；高度:100%；最小高度:100%；边距:0 自动；填充:0；溢出:隐藏；边框样式:实心；边框宽度:5px；}#第三个.bg1_3{背景:url(images/third/handschrift.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#第三个.bg2_3{背景:url(images/third/feurig.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#第三个.bg3_3{背景:url(images/third/seil.png) 50% 0 无重复固定；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#第五{背景:#ccc;高度:400px；边距:0 自动；填充:40px 0 0 0；}#header、#intro_bs、#second_bs{宽度:100%；}#intro_bs{背景:url(images/bg2.jpg) 50% 0 不重复；背景色:#c9cacc;颜色:#000000；高度:900px；边距:0 自动；填充:0；边框样式:实心；边框宽度:5px；}#intro_bs .bg1_bs{背景:url(images/intro_bs/mitarbeiter.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#intro_bs .bg2_bs{背景:url(images/intro_bs/feurig.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#intro_bs .bg3_bs{背景:url(images/intro_bs/handschrift.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#second_bs{背景:url(images/bg2.jpg) 50% 0 不重复；背景色:#c9cacc;颜色:#000000；高度:950px；边距:0 自动；填充:0；溢出:隐藏；边框样式:实心；边框宽度:5px；}#second_bs .bg1_2_bs{背景:url(images/second_bs/feurig.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#second_bs .bg2_2_bs{背景:url(images/second_bs/handschrift.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#second_bs .bg3_2_bs{背景:url(images/second_bs/steffen.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:950px；边距:0 自动；填充:0；左边距:-121px；}#third_bs{背景:url(images/bg2.jpg) 50% 0 不重复；背景色:#c9cacc;颜色:#000000；高度:950px；边距:0 自动；填充:0；溢出:隐藏；边框样式:实心；边框宽度:5px；}#third_bs .bg1_3_bs{背景:url(images/third_bs/feurig.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#third_bs .bg2_3_bs{背景:url(images/third_bs/handschrift.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:900px；边距:0 自动；填充:0；}#third_bs .bg3_3_bs{背景:url(images/third_bs/mike.png) 50% 0 不重复；宽度:900px；位置:绝对；高度:950px；边距:0 自动；填充:0；左边距:-121px；边距顶部:-287px；}.故事{边距:0 自动；最小宽度:980px；溢出:自动；宽度:980px；}.story .float-left, .story .float-right{填充:100px 0 0 0；位置:相对；宽度:350px；}.linkp1 a {背景:url('images/brandort_norm.gif') 0 0 无重复固定；/*高度:12像素；宽度:95px；*/显示:块；z-索引:11111；}.linkp1 a:悬停{背景:url('images/brandort_hover.gif') 0 0 无重复固定；}.linkp2 a {背景:url('images/brandstifter_norm.gif') 不重复固定；/*高度:12像素；宽度:95px；*/显示:块；z-索引:11111；}.linkp2 a:悬停{背景:url('images/brandstifter_hover.gif') 不重复固定；}.linkp3 a {背景:url('images/brandsaetze_norm.gif') 不重复固定；/*高度:12像素；宽度:95px；*/显示:块；z-索引:11111；}.linkp3 a:悬停{背景:url('images/brandsaetze_hover.gif') 不重复固定；}.linkp4 a {背景:url('images/brandschaetze_norm.gif') 不重复固定；/*高度:12像素；宽度:95px；*/显示:块；z-索引:11111；}.linkp4 a:悬停{background:url('images/brandschaetze_hover.gif') 不重复固定；}.linkp5 a {背景:url('images/brandpunkt_norm.gif') 不重复固定；/*高度:12像素；宽度:95px；*/显示:块；z-索引:11111；}.linkp5 a:悬停{背景:url('images/brandpunkt_hover.gif') 不重复固定；}#menu_neu {高度:40px；宽度:1200px；文本对齐:居中；行高:1em！重要；位置:固定；左:40%；宽度:640px；z-索引:10000；}ul#topNav{边距顶部:51px;左边距:-218px；颜色:#000000；}ul#topNav li {列表样式:无；显示:内联；边距:0；填充:0；保证金最高:50%；}ul#topNav a, ul#topNav span {向左飘浮;右边距:0.4em；左边距:0.1em；填充:0.2em 1em；文字装饰:无；颜色:#000000；字体大小:14px；}* html ul#topNav a, * html ul#topNav span {/* Korrektur fuer IE 5.x */宽度:8em；宽度:6em；}ul#topNav a:hover, ul#topNav span {颜色:#000000；字体大小:14px；}ul#topNav a:active {颜色:#000000；字体大小:14px；}ul#topNav div {清除:左；}#topNav .current a {颜色:#F45D32；}演示:http://ealtinel.com/height/
如何让它在 IE 中工作?
解决方案
在 IE 中，为了使元素具有 height:100%;，所有父元素都必须具有 height:100%;.链"中的任何中断都会导致 IE 忽略所有内容.
如果您的 css 包含以下内容，它应该可以工作:
html,body { height:100%;}#wrapper { 高度:100%;}.section { 高度:100%;}我已经在 IE 中打开了您的页面，并使用开发人员工具应用了这些更改，并且可以验证它是否有效.
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;
width: 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?
解决方案
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.
这篇关于高度:100% 在 Internet Explorer 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
