如何解决控制div高度从JS到CSS?
| 我的网站(www.jmquintela.cl)上有以下脚本: 函数ResizeIFrame(){ var div = document.getElementById(\“ wrapper \”); var myWidth = 0,myHeight = 0; 如果(typeof(window.innerWidth)== \'number \'){ //非IE myWidth = window.innerWidth; myHeight = window.innerHeight-80; }否则,如果(document.documentElement &&(document.documentElement.clientWidth || document.documentElement.clientHeight)){ // IE 6+处于“标准兼容模式” myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight-80; } else if(document.body &&(document.body.clientWidth || document.body.clientHeight)){ //兼容IE 4 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); 它用于控制\“ wrapper \” div高度,因此将其调整为客户端寡妇高度-X(变量号) 我想知道如何在css上转换该JS,或者如果它们工作正常的话,可以在表格上转换。解决方法
这是一个相当老的帖子,但这也是我面临的一个问题,并且最终能够通过将来自多个来源的一些代码拼凑起来来解决……这最终为我工作了:
<!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>
,#iframe_id {
height:100%
}
是仅使用CSS可获得的最接近的结果。由于您甚至无法在纯CSS中进行简单的数学运算(您可以在SASS中进行,但我离题了)
function set_height_to_parent(id,offset){
var e = document.getElementById(id);
e.height = parentElement.offsetHeight-offset;
}
是最直接的JS方式,不包括jQuery /一些库
,您可以这样做,但是在您的站点上,您将需要某种形式的“ Sticky footer \”解决方案,这并不完全是琐碎的。以下站点提到了一种解决方案,也许您可以使用html + css?
http://www.cssstickyfooter.com/
编辑:哦,在该解决方案中,您可能需要更改主要内容的溢出范围,因为您要调整其大小而不滚动。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。