Estos explorerTrolls...xD creo que la pregunta era bastante clara, pero os adjunto un código de prueba a ver si lo veis mejor. Los únicos cambios que me aplica y no pierde al acabar la función, son los que le aplico al body.
index.html
Código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="javascript" type="text/JavaScript" href="jsa.js"> onload="alto();"-->
<script>
function alto(){
var altura;
altura=document.getElementById('contenido').offsetHeight;
document.getElementById('contenedor').style.height='1000px';
alert(altura);
}
</script>
</head>
<body>
<div id="logo">
LOGO
</div>
<div id="menu">
MENU
<a href="" onclick="alto();">xxxx</a>
</div>
<div id="contenedor" class="column">
<div id="contenido" class="column">
CONTENIDO
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
dfgdfgbsdfb<br>
</div>
<div id="derecho" class="column">
DERECHO
</div>
</div>
<div id="pie">
PIE
</div>
</body>
</html>
style.css
Código:
*{
margin: 0 0 0 0;
}
#logo{
margin-top:5px;
margin-left: 5px;
border: solid;
width: 240px;
height: 100px;
}
#menu{
margin-top:5px;
margin-left: 250px;
border: solid;
width: 700px;
height: 50px;
}
#contenedor{
margin-left: 5px;
border: solid;
width: 1200px;
}
#izquierdo{
margin-left: 15px;
border: solid;
width: 210px;
float: left;
background-color: #F09C9C;
}
#contenido{
margin-left: 15px;
border: solid;
width: 910px;
float: left;
background-color: #F79FFA;
}
#derecho{
margin-left: 945px;
border: solid;
width: 230px;
height: 250px;
background-color: #A89FFA;
}
#pie{
margin-top:5px;
margin-left: 5px;
border: solid;
width: 1200px;
height: 120px;
background-color: #9FF7FA;
}
.column{
margin-top:5px;
height: auto;
}
Gracias por las molestias, espero consejo :P