Почему мой код исправления высоты работает неправильно, когда окно браузера восстанавливается после увеличения?
<!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 были бы еще лучше.