当浏览器窗口最大化后恢复时,为什么我的高度修复代码工作错误？
Kos*_*mos 5 html javascript css height
<!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>
我写了这个"很棒"的代码,修复了计算错误的愚蠢浏览器的元素高度.当用户通过鼠标或窗口最大化保持边框来调整浏览器大小时,它可以修复高度,但是一旦窗口恢复,高度计算错误并出现滚动条.我需要知道为什么以及如何解决它.
很可能你会问" 为什么我这么做？! "
这就是问题的解释:
我需要,我真的需要将页面高度设置为浏览器窗口的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高度将是" 最小适合内容 "或基于窗口高度计算,而不是父TD.
IE11是唯一一款正确计算内部div高度的浏览器.
PS如果你能解决IE8-10的主要问题,没有JS的Opera 12.x高度计算会更好.
您不需要 JavaScript 或表格来实现您想要的布局。
box-sizing: border-box;可以替换该 javascript，并且兼容 IE8+、FF 和 Chrome。这是一篇关于盒子大小的好文章。
新例子
获取此代码片段并将其粘贴到新的 HTML 文档中。这在 IE8 中有效，尽管我们需要在html,body使用时以 99.8% 的高度来适应它<!--[if IE 8]>。
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;。可以对其进行调整，以提供您正在寻找的确切布局。
超文本标记语言
<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;
}
| 归档时间： |
|
| 查看次数： |
793 次 |
| 最近记录： |