javascript 通过调整窗口大小动态更改 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17714741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change div height with window resize
提问by Kishore
I wanted to change height of a div when window is resized. I know it can be done with css using height:100%;but that doesn't work on what i need. I wanted to make this happen in pure javascript without JQuery or any other framework.
我想在调整窗口大小时更改 div 的高度。我知道它可以用 css 来完成，height:100%;但这对我需要的不起作用。我想在没有 JQuery 或任何其他框架的纯 javascript 中实现这一点。
Here is what i have done:
这是我所做的：
<div id="left">
<div id="inner">
</div>
</div>
CSS
CSS
#left{
margin-top:40px;
width:200px;
height:576px;
background:white;
}
#inner{
height:100%;
overflow-y:scroll;
}
JAVASCRIPT
爪哇脚本
window.onload=
window.onresize=function(){
var left=document.getElementById('left');
var window_height = window.innerheight;
if ( window_height > 600px ) { left.style.height = document.body.offsetHeight
+"px"; }
else { }
}
The div with id left has to have the same margin. I just wanted to change the height of div to match the inner window height (in px no %).
id 为 left 的 div 必须具有相同的边距。我只是想改变 div 的高度以匹配内部窗口的高度（以 px 为单位，没有 %）。
Thank You.
谢谢。
回答by T.J. Crowder
window.innerheightshould be window.innerHeight(capital H). Note that IE doesn't support it prior to IE9.
window.innerheight应该是window.innerHeight（大写H）。请注意，IE9 之前的 IE 不支持它。
Also note that you're comparing an elementwith a number here:
另请注意，您在此处将元素与数字进行比较：
if ( left < window_height )
// ^--- element
You probably wanted to get the height from leftinstead, as that condition will never be true.
您可能想从中获取高度left，因为这种情况永远不会成立。
回答by caoglish
please see jsfiddle jsfiddle
请看 jsfiddle jsfiddle
try to use console.log to know what kind of value or object you dealing with
尝试使用 console.log 来了解您处理的是哪种值或对象
window.onload = window.onresize = function () {
var left = document.getElementById('left');
var window_height = window.innerHeight;
console.log(left.offsetHeight);
console.log(window_height);
if (left.offsetHeight < window_height) {
left.style.height = window_height + "px";
} else {}
}
set 100% first to know the exact height number, then assign back to height.
首先设置 100% 以知道确切的高度数字，然后再分配回高度。
updated code updated jsfiddle
更新代码更新 jsfiddle
window.onload = window.onresize = function () {
var left = document.getElementById('left');
console.log(left.offsetHeight);
var window_height = window.innerHeight;
if (left.offsetHeight < window_height) {
left.style.height = '100%';
left_height=left.offsetHeight;
console.log(left_height);
left.style.height = left_height + "px";
} else {}
};
