Question

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

我写了这个＆＃34;真棒＆＃34;代码，修复了计算错误的愚蠢浏览器的元素高度。当用户通过使用鼠标或窗口最大化边框来调整浏览器大小时，它可以修复高度，但是一旦窗口恢复，高度计算错误并出现滚动条。我需要知道为什么以及如何解决它。

很可能你会问＆＃34; 为什么我这么做？！＆＃34;

这是对问题的解释：
我需要我真的需要让页面高度达到浏览器窗口的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高度为＆＃34; 最小值以适合内容＆＃34;或根据窗口高度计算，而不是父TD。 enter image description here

enter image description here

IE11是唯一一款正确计算内部div高度的浏览器。 enter image description here 附：如果你能解决IE8-10的主要问题，没有JS的Opera 12.x高度计算会更好。

Answer 1

您不需要javascript或表来实现所需的布局。

box-sizing: border-box;可以替换该JavaScript并与IE8 +，FF和Chrome兼容。 This is a good article on box-sizing.

新示例

获取此代码段并将其粘贴到新的HTML文档中。这适用于IE8，但我们需要使用html,body在<!--[if IE 8]>上使用99.8％的高度来容纳它。

This is the exact solution here.

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

原始示例

以下是一个以display: table; / display:table-cell;为主题的简单示例。它可以调整，以提供您正在寻找的确切布局。

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

Answer 2

好的，经过一番研究后，看来这真的只能用JS作为伴侣来完成。研究：

他们把我引向了这个令人敬畏的little CSS Tricks page。（需要jQuery，使用1.9.1进行测试[应该与IE8兼容]）。这有助于让div元素在position:absolute;内获得td而不会溢出。

因此，这是指向JSFiddle的链接，以您的代码为基础。有必要position:absolute一些元素，而其他元素我将其添加到清洁度中（尽可能使用基于table的布局）。

在IE8，IE9，IE10上测试，并按预期工作。

（如果右键单击输出并查看源代码，您应该能够看到一个html文件，您可以将其保存并作为jsfiddle之外的文件进行测试）

Answer 3

我在项目上遇到了完全相同的问题。最终，最终采用跨浏览器解决方案的最佳技巧实际上是绝对定位。

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

你被允许持怀疑态度，但看看这个jsfiddle;）

http://jsfiddle.net/evomk0zu/

当浏览器窗口最大化后恢复时，为什么我的高度修复代码工作错误？

3 个答案: