Why my heights fixer code work wrong when browser

2019-01-28 03:29发布

站内文章 / JavaScript
9 0 0

问题:

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

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

回答1:

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


回答2:

Ok so after a little research, it appears this is really only capable of being done with JS as a companion. Research:

  • How do I make a div fill an entire table cell?
  • How to make <div> fill <td> height
  • Make a DIV fill an entire table cell

They led me to this awesome little CSS Tricks page. (requires jQuery, tested using 1.9.1 [should be IE8 compatible]). That helps to let div elements get position:absolute; within a td and not spill out.

As such, here is a link to a JSFiddle with your code as a base. It was necessary to position:absolute some elements, and others i added it to for cleanliness (as much as is possible with a table based layout).

Tested on IE8, IE9, IE10, and working as expected.

(If you right click on the output and view source, you should be able to see an html file that you can save and test with as a file outside of jsfiddle)



回答3:

I had the exact same issue working on a project. It ended up that the best trick to end up with a cross-browser solution was actually absolute positionning. 

.wrap{background:pink;position:absolute;top:0;left:0;right:0;bottom:0}

You are allowed to be sceptical, but have a look at this jsfiddle ;)

http://jsfiddle.net/evomk0zu/



标签： javascript html css height
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~