Question

我的网站上有这个脚本（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);

它用于控制“包装器”div高度，因此它将调整为客户端寡妇高度 - X（var number）我想知道如何在css上翻译JS，或者如果它们正常工作，可以使用表格。？

Answer 1

#iframe_id {
 height:100%
}

是最接近css-only的。既然你不能在纯粹的CSS中做简单的数学运算（你可以在sass，但我离题）

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

是最直接的JS方式，不包括jQuery / some library

Answer 2

你可以这样做，但是看看你的网站，你需要某种形式的“粘性页脚”解决方案，这并非完全无关紧要。以下网站提到了一个解决方案，也许你可以使用那个html + css？

http://www.cssstickyfooter.com/

编辑：哦，在那个解决方案中，您可能需要更改主要内容的溢出，因为您希望它调整大小，而不是滚动。

Answer 3

这是一个相当古老的帖子，但这也是我面临的一个问题，并且最终能够通过拼凑来自多个来源的代码来解决......这是最终为我工作的解决方案：

<!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>

从JS到css控制div高度？

3 个答案: