Warum funktioniert der Code für meine Höhenkorrektur falsch, wenn das Browserfenster nach dem Maximieren wiederhergestellt wird?

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

Ich habe diesen "tollen" Code geschrieben, der die Höhe der Elemente für dumme Browser korrigiert, die ihn falsch berechnen. Es korrigiert die Höhe in Ordnung, wenn der Benutzer die Größe des Browsers ändert, indem er den Rand mit der Maus hält oder das Fenster maximiert. Sobald das Fenster wiederhergestellt ist, werden die Höhen falsch berechnet und die Bildlaufleiste angezeigt. Ich muss wissen, warum und wie ich das Problem beheben kann.

Höchstwahrscheinlich werden Sie fragen wollen "Warum zum Teufel mache ich das ?!"

Das ist die Erklärung des Problems:
Ich brauche,ICH BRAUCHE WIRKLICH Seitenhöhe auf 100% des Browserfensters einstellen.

Dieser ultimative einfache Code:

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

Gibt ultimative seltsame Ergebnisse in IE8 - IE10 und Opera 12.x Die innere Div-Höhe wäre "minimal zu Inhalt passen" oderberechnet auf Basis der Fensterhöhe, anstelle dieses Elternteils TD.

IE11 ist der einzige Browser, der die Höhe des inneren Div korrekt berechnet. P.S. Wenn Sie das Hauptproblem für IE8 - 10 lösen können, wären Opera 12.x - Höhenberechnungen ohne JS sogar noch besser.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage