CODEWITHSUNDEEP
javascriptcss
JMKintela
JMKintela

Reputation: 25

control div height from JS to css?

I have this script on my site (www.jmquintela.cl) :




function ResizeIFrame() {
                var div = document.getElementById("wrapper");
                var myWidth = 0, myHeight = 0;

                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth ;
                    myHeight = window.innerHeight - 80;

                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth ;
                    myHeight = document.documentElement.clientHeight - 80 ;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight - 80;
                }
                div.style.width = myWidth + 'px';
                div.style.height = myHeight + 'px';
            }  

window.onmouseclick = window.onmouseover = window.onload = window.onresize = ResizeIFrame;

setTimeout("ResizeIFrame()", 5);
setTimeout("ResizeIFrame()", 25);
setTimeout("ResizeIFrame()", 50);
setTimeout("ResizeIFrame()", 100);
setTimeout("ResizeIFrame()", 1000);

it's used to control the "wrapper" div heigth so it will be resized to the client widow heigth - X (var number) I would like to know how can I translate that JS on css, or maybe with tables if they work fine..?

Upvotes: 0

Views: 1641

Answers (3)

David
David

Reputation: 68

This is a rather old post, but it's a problem I was facing as well, and was finally able to solve by piecing together bits of code from several sources... here's the solution that ended up working for me:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Div Resizing With Plain Javascript</title>
</head>
<body style="margin: 0 auto;">
  <div id="page-wrapper">
    <div id="header" style="min-height: 32px; background: #aaa;">
      header
    </div>
    <div id="content" style="background: #ddd;">
      content
    </div>
    <div id="footer" style="min-height: 32px; background: #aaa;">
      footer
    </div>
  </div>
<script type="text/javascript">
  function autorun()
  {
    var divHeightContent = window.innerHeight,
        divHeightHeader = document.getElementById('header').offsetHeight,
        divHeightFooter = document.getElementById('footer').offsetHeight;
    document.getElementById('content').style.height=( divHeightContent - divHeightHeader - divHeightFooter + 'px' );
  }
  if (window.addEventListener) window.addEventListener("load", autorun, false);
  else if (window.attachEvent) window.attachEvent("onload", autorun);
  else window.onload = autorun;
  window.onresize = autorun;
</script>
</body>
</html>

Upvotes: 0

Jeroen
Jeroen

Reputation: 63739

You can do this, but looking at your site you'll need some form of "Sticky footer" solution, which isn't entirely trivial. The following site mentions one solution for that, perhaps you can use that html+css?

http://www.cssstickyfooter.com/

Edit: oh and in that solution you'll probably need to change the overflow of the main content, as you want it to resize, and not scroll.

Upvotes: 0

colinross
colinross

Reputation: 2085

#iframe_id {
 height:100%
}

is the closest you can get with css-only. Since you can't do even simple math in pure css (you can in sass, but i digress) 

function set_height_to_parent(id, offset){
var e = document.getElementById(id);
e.height = parentElement.offsetHeight-offset;
}

is prolly the most straight forward JS way, not including jQuery / some library

Upvotes: 0

Related Questions