Menu
<!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.
492
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
