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
76
77
78
79
|
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<meta name="crc" content=1064543067>
<STYLE type="text/css">
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
background-color: #cccccc;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
font-style: italic;
background-color: #ffffe0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
overflow: auto;
padding: 2px .5em;
border: solid 1px black;
background-color: #ffffff;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
text-align: center;
margin-top: auto;
background-color: #cccccc;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header">
<table width=100% height=100%><tr><td style="font-style: italic" align=center valign=middle>Header</td></tr></table>
</DIV>
<DIV id="sidebar">
<P style="padding-left: 2em; padding-top: 2em">S<br>i<br>d<br>e<br>b<br>a<br>r</p>
</DIV>
<DIV id="main">
<h2>Introduction</h2>This is an example of fixed positioning.
<h2>Layout</h2>This example is straight from the CSS2 spec (section 9.6.1) and shows how to create
frame-like presentations. This is the main text of the document that's inside of a fixed position
scrollable DIV tag.
<p>The header, footer, and sidebar are all done with fixed position DIV tags, too. The header and
footer have nested tables that are used to center the text horizontally and vertically.
<h2>Fixed positioning</h2>Fixed positioning is a subcategory of absolute positioning. The only
difference is that for a fixed positioned box, the containing block is established by the viewport.
<p>For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they
are similar to fixed background images. For paged media, boxes with fixed positions are repeated on
every page.
</DIV>
<DIV id="footer">
<table width=100% height=100%><tr><td style="font-style: italic" align=center valign=middle>Footer</td></tr></table>
</DIV>
</BODY>
</HTML>
|
