Por que o código do meu fixador de altura funciona incorretamente quando a janela do navegador é restaurada após ser maximizada?

Question

Aug 04, 2014, 03:29 PM

Por que o código do meu fixador de altura funciona incorretamente quando a janela do navegador é restaurada após ser maximizada?

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

Eu escrevi esse código "impressionante", que corrige a altura dos elementos em navegadores estúpidos que calculam errado. Ele corrige a altura quando o usuário redimensiona o navegador, mantendo as bordas com o mouse ou a janela maximizadas, mas depois que a janela é restaurada, as alturas são calculadas incorretamente e a barra de rolagem aparece. Eu preciso saber por que e como corrigi-lo.

Provavelmente você vai querer perguntar "por que diabos eu estou fazendo isso ?!"

Essa é a explicação do problema:
Eu preciso,EU REALMENTE PRECISO ter a altura da página em 100% da janela do navegador.

Este código simples final:

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

Dá resultados estranhos no IE8 - IE10 e Opera 12.x A altura interna da div seria "mínimo para caber no conteúdo"oucalculado com base na altura da janela, em vez daquele TD pai.

O IE11 é o único navegador que calcula a altura da div interna corretamente. P.S. Se você puder resolver o problema principal do IE8 - 10, os cálculos de altura do Opera 12.x sem JS, seriam ainda melhores.