tag - object en html
altura: 100% no funciona en Internet Explorer (8)
Tengo una pregunta sobre la height:100% propiedad CSS height:100% en Internet Explorer.
height:100% no funciona en IE, pero sí en Firefox y Chrome.
Archivo 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>
Archivo 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;
}
Demostración: http://ealtinel.com/height/
¿Cómo puedo hacer que funcione en IE?
En IE, para que un elemento tenga height:100%; , todos los elementos padre deben tener height:100%; . Cualquier ruptura en la "cadena" hará que IE ignore todo.
Debería funcionar si su css incluye lo siguiente:
html,body { height:100%; }
#wrapper { height:100%; }
.section { height:100%; }
Abrí tu página en IE y apliqué estos cambios usando las herramientas de desarrollo y puedo verificar que funcione.
Para hacer que funcione Debe hacer que el html padre y el hijo tengan los mismos atributos. En algunos casos, debe usar píxeles para que funcione.
html,body, // this has to go to every element you want to have a height 100%
{
height:100%;
}
También tengo algo bueno
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+";");
}
}
Para usar la height: 100% , el contenedor principal debe tener una altura fija.
Entonces, por ejemplo, mientras esto debería funcionar:
<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>
Lo siguiente no funcionará:
<div style="height: 100%;">
--- same code
</div>
Una forma de lograr una altura fija cuando no se conoce la altura de los padres es usar la 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>
De lo contrario, podría usar javascript como se indica en la otra respuesta. Pero prefiero las soluciones de CSS puro.
Espero que ayude.
Probé algunas cosas y esta parece ser la solución:
Agregue la siguiente metaetiqueta en la sección principal de su documento html:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >
Parece que IE activa automáticamente el modo de compatibilidad para (IE) Versión 7. Esta metaetiqueta fuerza a IE a establecer el modo de compatibilidad a la Versión 10 de IE. Esta solución solo funciona en IE Versión 10 o superior.
¡Buena suerte!
Prueba este código
borde inferior: 1px sólido / * cualquier color que coincida con su diseño * /
Sé que esta publicación es antigua, pero aún podría ser útil para algunas personas. Tuve un problema con una imagen en IE. La imagen tenía la propiedad "max-width: 100%", y funcionaría perfectamente en Chrome, pero no funcionaría en IE.
Lo que simplemente le hice a la imagen es poner un ancho Y un ancho máximo. Sería algo así como:
img.logo {
width:100%;
max-width:1600px;
}
Y funcionó para mí: D`
`
Si no ingresa la propiedad de altura, se dimensionará proporcionalmente al ancho. style = "height: 25%; width: 25%; object-fit: contiene" does not work in IE style = "width: 25%; object-fit: contiene" works in IE and size height at 25%
También tuve el mismo problema con uno de mis proyectos, pero no encontré la solución como width: 100% funcionaba pero no la height . Así que usé un pequeño truco para envolver mi página dentro de un div y actualizar la altura de div con javascript.
windowHeight = window.innerHeight
document.getElementById("mainContainer").setAttribute(''style'',"height:"+windowHeight+";");
Y lo vinculé a un evento.