Skip to content

Instantly share code, notes, and snippets.

@mosra

mosra/fullheight.html

Created September 6, 2011 18:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mosra/1198542 to your computer and use it in GitHub Desktop.
Save mosra/1198542 to your computer and use it in GitHub Desktop.
Download ZIP
Nested table layouts with enabled elasticity
Raw
fullheight.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- kate: indent-width 1 -->
<!--
State:
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- FF, Webkit, Opera: OK
- IE8, IE9: takes height: 100% as 100% viewport height, thus enabling
unnecessary scrollbar.
(no doctype)
- FF, Webkit, Opera: the same as with doctype
- IE8, IE9: totally messed up (probably doesn't understand display: table)
-->
<html>
<head>
<style>
html {
height: 100%;
background-color: #ff0000;
}
body {
height: 100%;
margin: 0px;
background-color: #ff1111;
}
.table { display: table; }
.table > * { display: table-row; }
.table > * > * { display: table-cell; }
body > div {
width: 100%;
height: 100%;
}
#head {
background-color: #44bbcc;
}
#content {
height: 100%;
background-color: #ff2222;
}
#foot {
background-color: #88dddd;
}
#left {
min-width: 100px;
background-color: #bbeeff;
}
#main {
width: 100%;
height: 100%; /* important! */
background-color: #ff3333;
}
#right {
min-width: 100px;
background-color: #0055bb;
}
#maintop {
/*width: 100%;*/
height: 10%;
background-color: #447799;
}
#mainbottom {
/*width: 100%;*/
height: 90%;
background-color: #ff4444;
}
#mainbottomleft {
width: 60%;
background-color: #6699aa;
}
#mainbottomright {
width: 40%;
background-color: #88aaaa;
}
/* Sensible defaults */
.table > * > * > .table {
width: 100%;
height: 100%;
}
/* Fix misinterpretation of 100% height in Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.table > * > * {
position: relative;
}
.table > * > * > .table {
position: absolute;
top: 0px;
bottom: 0px;
}
}
</style>
</head>
<body>
<div class="table">
<div>
<div id="head">head</div>
</div>
<div>
<div id="content">
<div class="table">
<div>
<div id="left">left</div>
<div id="main">
<div class="table">
<div>
<div id="maintop">maintop</div>
</div>
<div>
<div id="mainbottom">
<div class="table">
<div>
<div id="mainbottomleft">mainbottomleft</div>
<div id="mainbottomright">mainbottomright</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="right">right</div>
</div>
</div>
</div>
</div>
<div>
<div id="foot">foot</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment