Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - Why my heights fixer code work wrong when browser window restored after being maximised?

0 votes
394 views
in Technique[技术] by (71.8m points)

javascript - Why my heights fixer code work wrong when browser window restored after being maximised? 

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

I wrote this "awesome" code, that fixes elements height for stupid browsers that calculate it wrong. It fixes height fine when user resize browser by holding it's borders with mouse or window maximizes, but once window getting restored, heights calculated wrongly and scroll bar appears. I need to know why and how to fix it.

Most likely you will want to ask "why the hell I doing that?!"

That's the explanation of the problem:
I need, I REALLY NEED to have page height at 100% of browser window.

This ultimate simple 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>

Gives ultimate weird results in IE8 - IE10 and Opera 12.x The inner div height would be "minimal to fit content" or calculated based on window height, instead of that parent TD. enter image description here

enter image description here

IE11 is the only one browser that calculates height of inner div correctly. enter image description here P.S. If you can solve main problem for IE8 - 10, Opera 12.x height calculations without JS, would be even better.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You don't need javascript or tables to achieve the layout you want.

box-sizing: border-box; can replace that javascript and is compatible with IE8+, FF, and Chrome. This is a good article on box-sizing.

New Example

Take this snippet and paste it into a new HTML document. This works in IE8, though we need to accommodate for it with height 99.8% on html,body using <!--[if IE 8]>.

This is the exact solution here.

HTML and 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>

Original Example

Here is a simple example featuring display: table; / display:table-cell;. It can be tweaked to give you the exact layout that you are looking for.

Have a jsBin example!

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;
}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...