<!DOCTYPE html>
<html style = 'height: 100%;'>
<head>
<title>test manual height calculations</title>
</head>
<script type = 'text/javascript'>
window.onresize = fixHeighs;
function endsWith(str, suffix)
{
if (!str)
return false;
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
function fixHeighs(start_elem)
{
if (start_elem && start_elem.target) // if this is event, then make var null
start_elem = null;
var curr_elem = start_elem ? start_elem : document.body; // determine what element we should check now
var neededHeight = curr_elem.getAttribute("data-neededHeight"); // get data-neededHeight attribute
if (endsWith(neededHeight, "%")) // if this attribute set
{
curr_elem.height = ((neededHeight.replace("%", "") * curr_elem.parentElement.offsetHeight) / 100) + "px"; // fix heights
curr_elem.style.height = ((neededHeight.replace("%", "") * curr_elem.parentElement.offsetHeight) / 100) + "px";
}
for (var i = 0; i < curr_elem.children.length; i++)
fixHeighs(curr_elem.children[i]); //do the same for children
}
</script>
<body style = 'height: 100%; margin: 0px;' onload = "fixHeighs(null);">
<table border = '1' width = '100%' data-neededHeight = '100%'>
<tr>
<td colspan = '2' height = '1px'>header</td>
</tr>
<tr>
<td width = '40%' align = 'center' valign = 'middle' bgcolor = 'silver'>
<div data-neededHeight = '100%' style = 'width: 90%; border: dashed;'>should be 100% of silver cell</div>
<td>text</td>
</tr>
<tr><td colspan = '2' height = '1px'>bottom panel</td></tr>
</table>
</body>
</html>
我写了这段“很棒”的代码，它为计算错误的愚蠢浏览器修复了元素高度。 当用户通过鼠标按住浏览器的边框或窗口最大化来调整浏览器大小时，它可以很好地修复高度，但是一旦窗口恢复，高度计算错误并出现滚动条。我需要知道为什么以及如何解决它。
您很可能会问“我到底为什么要这么做？!”
这就是问题的解释:
我需要，我真的需要让页面高度达到浏览器窗口的 100%。
这个最终的简单代码:
<!DOCTYPE html>
<html style = "height: 100%;">
<head>
<title>test height</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv = "Content-Type" content = "text/html; charset = windows-1251" />
</head>
<body style = "height: 100%; margin: 0px;">
<table border = "1" width = "100%" height = "100%">
<tr>
<td colspan = "2" height = "1px">header</td>
</tr>
<tr>
<!-- can add height = '100%' in this TD and then in IE8 - 10, Opera 12.17 inner div height will be 100% OF PAGE, instead of this cell--><td width = "40%" <!--height = '100%'--> align = "center" valign = "middle" bgcolor = 'silver'>
<div style = 'width: 90%; height: 100%; border: dashed;'>should be 100% of silver cell</div>
</td>
<td>text</td>
</tr>
<tr><td colspan = "2" height = "1px">bottom panel</td></tr>
</table>
</body>
</html>
在 IE8 - IE10 和 Opera 12.x 中给出最终奇怪的结果
内部 div 高度将是“最小以适合内容”或根据窗口高度计算，而不是父 TD。
IE11是唯一一款可以正确计算内部div高度的浏览器。
附言如果你能解决 IE8 - 10 的主要问题，Opera 12.x 的高度计算没有 JS，会更好。
最佳答案
您不需要 javascript 或表格来实现您想要的布局。
box-sizing: border-box;可以替换那个javascript，兼容IE8+、FF、Chrome。 This is a good article on box-sizing.
新示例
将这段代码粘贴到一个新的 HTML 文档中。这在 IE8 中有效，尽管我们需要在 html,body 上以 99.8% 的高度适应它使用 <!--[if IE 8]> .
This is the exact solution here.
HTML 和 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
.wrap {
height: 100%;
}
.header {
height: 5%;
border: solid 1px #000;
border-bottom: none;
}
.table {
display: table;
height: 90%;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.cell {
display: table-cell;
border: solid 1px #000;
vertical-align: middle;
height: 100%;
}
.footer {
height: 5%;
border: solid 1px #000;
border-top: none;
}
.tableTwo {
height: 100%;
display: table;
width: 100%;
}
.cellTwo {
display: table-cell;
border: solid 5px #F00;
vertical-align: middle;
}
</style>
<!--[if IE 8]>
<style type="text/css">
html,body {
height: 99.8%;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<div class="header">
Header
</div>
<div class="table">
<div class="cell">
<div class="tableTwo">
<div class="cellTwo">
I'm Vertically Centered!
</div>
</div>
</div>
<div class="cell">
I'm Vertically Centered!
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
原始示例
这是一个以 display: table; 为特征的简单示例/display:table-cell; .可以对其进行调整，以提供您正在寻找的确切布局。
HTML
<div class="wrap">
<div class="header">
Header
</div>
<div class="table">
<div class="cell">
I'm Vertically Centered!
</div>
<div class="cell">
I'm Vertically Centered!
</div>
</div>
<div class="footer">
Footer
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
.wrap {
height: 100%;
}
.header {
height: 5%;
border: solid 1px #000;
border-bottom: none;
}
.table {
display: table;
height: 90%;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.cell {
display: table-cell;
border: solid 1px #000;
vertical-align: middle;
}
.footer {
height: 5%;
border: solid 1px #000;
border-top: none;
}
关于javascript - 为什么我的高度固定器代码在最大化后恢复浏览器窗口时出错？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25119868/