-
Notifications
You must be signed in to change notification settings - Fork 14
/
overflow-methods.html
executable file
·35 lines (28 loc) · 1.41 KB
/
overflow-methods.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Methods for overflowing content</title>
<style type="text/css">
body {width: 55em; padding-block-end: 4em;}
#contain {display: flex; justify-content: space-between; flex-wrap: wrap;}
b {width: 30%; font: 700 1.25em Consolas, Open Sans; padding-bottom: 1ch; text-align: center;}
div.sidebar {width: 30%; height: 7em; background: rgba(216,128,0,0.33); color: rgba(0,0,0,0.5);
font: bold italic x-large sans-serif;}
#scroll {overflow: scroll;}
#hidden {overflow: hidden;}
</style>
</head>
<body>
<div id="contain">
<b>visible</b>
<b>hidden / clip</b>
<b>scroll</b>
<div class="sidebar">This is an element that’s only 7em tall. Any overflowing content will be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>
<div class="sidebar" id="hidden">This is an element that’s only 7em tall. Any overflowing content won’t be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>
<div class="sidebar" id="scroll">This is an element that’s only 7em tall. Any overflowing content won’t be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>
</div>
</div>
</body>
</html>