-
Notifications
You must be signed in to change notification settings - Fork 0
/
full-height-body.html
75 lines (70 loc) · 2.08 KB
/
full-height-body.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Full-Height Body</title>
<link rel="canonical" content="https://alanhogan.github.io/web-experiments/full-height-body.html">
<style>
html, body {
font-family: system-ui, sans-serif;
font-size: 16px;
font-size: calc(10px + 2vmin);
background: white none;
color: black;
padding: 0;
margin: 0;
height: 100%;
}
h1, p {
margin: 0;
line-height: 1.6;
}
p + p {
margin-top: 0.8em;
}
h1 { font-size: 200%; font-weight: normal; }
code {
font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
}
button {
-webkit-appearance: none;
background: #333;
color: white;
font: inherit;
padding: 0 0.6em;
border-radius: 0.2em;
box-shadow: 0.2em 0.2em rgba(0,0,0,0.2);
cursor: pointer;
}
button:active {
transform: translate(0.1em, 0.1em);
box-shadow: 0.1em 0.1em rgba(0,0,0,0.2);
}
/* anti-fuzz hack */
button:focus:hover {
outline: none;
}
.abs {
position: absolute;
top: 3em;
left: 3em;
right: 3em;
bottom: 3em;
overflow: auto;
border: 0.5em solid black;
padding: 2em;
}
</style>
</head>
<body>
<div class="abs">
<h1>Full-Height Body</h1>
<p>Most browsers <i>would</i> render this page with a <code>body</code> element with a height of 0 because it has no statically positioned children that would it to grow, <i>but</i> we have added the sinlge CSS declaration <code>html, body { height: 100%; }</code>.</p>
<p>As a result the body is no longer zero-height but should instead match the viewport height. This is a work-around for code that makes faulty assumptions based on the size of the body element.</p>
<p><a href="https://alanhogan.github.io/web-experiments/zero-height-body.html">View this same page but with the zero-height body here.</a></p>
<p>All this text is contained within an absolutely positioned <code>div</code>.</p>
<p><button onclick="alert(document.getElementsByTagName('body')[0].clientHeight + 'px')">What’s the height of body?</button></p>
</div>
</body>
</html>