William Luis

0 %
William Luis
Fullstack Developer
  • Residence:
    Canada
  • City:
    Toronto
  • Age:
    26
French
English
Spanish
html
CSS
Js
PHP
WordPress
  • Bootstrap, Materialize
  • Stylus, Sass, Less
  • Gulp, Webpack, Grunt
  • GIT knowledge

Script para ajustar altura da div junto com a da página

25 de janeiro de 2013

Estava trabalhando em um site que tem um menu lateral, que tem a altura de 100%, só que quando abria um submenu, aparecia a barra de rolagem, e altura do menu não ajustava o tamanho sozinho, fiz uma demorada busca até que achei esse script abaixo.

Colocar antes da TAG </head>

[sourcecode language=”javascript”]</pre>
<script>
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

return [ alert("width: "+myWidth+" pxnheight: "+myHeight+" px") ];
}
</script>
<script>
function ajustarAltura(){
var heightTela = document.body.scrollHeight
document.getElementById(‘menuLateral’).style.height = heightTela+"px";
}
</script>
<pre>[/sourcecode]

Colocar no fim da página.
[sourcecode language=”javascript”]</pre>
<script>
alertSize();
alert("menulateral: "+$("#menuLateral").css("height"));
alert("document.body.scrollWidth: "+document.body.scrollWidth+" pxndocument.body.scrollHeight: "+document.body.scrollHeight+" px");
</script>
<pre>[/sourcecode]

Posted in Dicas, JavaScript, NavegadoresTags:
Write a comment