Html 高度：100% 在 Internet Explorer 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16811716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
height:100% not working in Internet Explorer
提问by aldimeola1122
I have a question about the CSS property height:100%in Internet Explorer.
我对height:100%Internet Explorer 中的 CSS 属性有疑问。
height:100%does not work in IE, but it does in Firefox and Chrome.
height:100%在 IE 中不起作用，但在 Firefox 和 Chrome 中起作用。
HTML File :
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 File :
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;
}
Demo : http://ealtinel.com/height/
演示：http: //ealtinel.com/height/
How can I get it to work in IE?
我怎样才能让它在 IE 中工作？
回答by snumpy
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.
在 IE 中，为了使元素具有height:100%;，所有父元素都必须具有height:100%;。“链”中的任何中断都会导致 IE 忽略所有内容。
It should work if your css includes the following:
如果您的 css 包含以下内容，它应该可以工作：
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.
我已经在 IE 中打开了您的页面，并使用开发人员工具应用了这些更改，并且可以验证它是否有效。
回答by Savas Vedova
In order to use height: 100%, the parent container should have a fixed height.
为了使用height: 100%，父容器应该有一个固定的高度。
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;.
当您不知道父母的身高时，实现固定高度的一种方法是使用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.
否则，您可以按照其他答案中的说明使用 javascript。但我更喜欢纯 CSS 解决方案。
Hope that helps.
希望有帮助。
回答by lakshya_arora
In order to make it work. You have to make the parent html and the child to have the same attributes.In some cases you have to use pixels in order to make it function.
为了让它发挥作用。您必须使父 html 和子 html 具有相同的属性。在某些情况下，您必须使用像素才能使其正常工作。
html,body, \ this has to go to every element you want to have a height 100%
{
height:100%;
}
I also have something nice
我也有好东西
window.onload=function(){
if(navigator.appName == "Microsoft Internet Explorer"){ \ to detect if the browser used by the client is IE
winHight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+winHeight+";");
}
}
回答by abhishekgarg
I faced a same problem with one of my project as well but couldn't find the solution as width: 100%was working but not height. So I used a little trick to wrap my page inside a divand update div's height with javascript.
我的一个项目也遇到了同样的问题，但找不到解决方案，因为它width: 100%正在工作，但没有height。所以我使用了一个小技巧将我的页面包裹在 a 中div并使用 javascript 更新 div 的高度。
windowHeight = window.innerHeight
document.getElementById("mainContainer").setAttribute('style',"height:"+windowHeight+";");
And linked that to an event.
并将其与事件联系起来。
回答by Bano
I know this post is old, but it still might be useful to some people. I had a problem with an image on IE. The image had the property "max-width:100%", and it would work perfectly on Chrome, but not at all on IE.
我知道这篇文章很旧，但它仍然可能对某些人有用。我在 IE 上遇到图像问题。该图像具有“max-width:100%”属性，它可以在 Chrome 上完美运行，但在 IE 上则完全不可用。
What I simply did to the image is put a width AND a max-width. It would be something like :
我对图像所做的只是放置一个宽度和一个最大宽度。它会是这样的：
img.logo {
width:100%;
max-width:1600px;
}
And it worked for me :D`
它对我有用：D`
`
`
回答by Etienne Dieuned N.
If you don't enter the height property, it will be sized proportionally to the width. style="height: 25%; width: 25%; object-fit: contain" doesn't work in IE style="width: 25%; object-fit: contain" works in IE and sized height at 25%
如果您不输入高度属性，它的大小将与宽度成比例。style="height: 25%; width: 25%; object-fit: contains" 在 IE 中不起作用 style="width: 25%; object-fit: contains" 在 IE 中有效，尺寸高度为 25%
回答by ?ichael
Try this code
试试这个代码
border-bottom: 1px solid /* any color that match to your design */
border-bottom: 1px solid /* 任何与您的设计相匹配的颜色 */
回答by Arda Cansiz
I tried a few things out and this seems to be the solution:
我尝试了一些方法，这似乎是解决方案：
Add the following meta-tag in the head-section of your html-document:
在 html 文档的 head-section 添加以下元标记：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >
It seems as if the IE automatically turns on the compatibility mode for (IE) Version 7. This meta-tag forces IE to set the compatibility mode to Version 10 of IE. This solution only work in IE Version 10 or higher.
好像 IE 自动打开了（IE）版本 7 的兼容模式。这个元标记强制 IE 将兼容模式设置为 IE 的版本 10。此解决方案仅适用于 IE 版本 10 或更高版本。
Good Luck!
祝你好运！
