I wanted to achieve the "frames-like" feel I'd seen in libraries like MochaUI - I figured there *had* to be a simple way to get frames-like layout behavior without frames or javascript, and without much css or any hacks.
Then I remembered the css scale-to-fit trick I saw a while back, and made a simple page layout based on that. Ok, so this is probably old hat to the rest of the world, but it's the first time I've played with it. =)
Compare this page to the scaling with the jQuery "Layout" plugin, which granted has additional functionality, but doesn't scale larger as smoothly and relies on javascript.
Works in:
- Chrome
- FireFox
- Safari
- IE8
Fails in IE7 or below, but frankly, I don't really care about them. ;)
Here's a table to fill some space so's you can scroll.
IE8 fails to do the padding-bottom on this content div, but other than that seems to behave properly.
# | asdfsa | asdfsa | asdfsa |
---|---|---|---|
1 | asdfsa | asdfsa | asdfsa |
2 | asdfsa | asdfsa | asdfsa |
3 | asdfsa | asdfsa | asdfsa |
4 | asdfsa | asdfsa | asdfsa |
5 | asdfsa | asdfsa | asdfsa |
6 | asdfsa | asdfsa | asdfsa |
7 | asdfsa | asdfsa | asdfsa |
8 | asdfsa | asdfsa | asdfsa |
9 | asdfsa | asdfsa | asdfsa |
10 | asdfsa | asdfsa | asdfsa |
11 | asdfsa | asdfsa | asdfsa |
12 | asdfsa | asdfsa | asdfsa |
13 | asdfsa | asdfsa | asdfsa |
14 | asdfsa | asdfsa | asdfsa |
15 | asdfsa | asdfsa | asdfsa |
16 | asdfsa | asdfsa | asdfsa |
17 | asdfsa | asdfsa | asdfsa |
18 | asdfsa | asdfsa | asdfsa |
19 | asdfsa | asdfsa | asdfsa |
20 | asdfsa | asdfsa | asdfsa |
21 | asdfsa | asdfsa | asdfsa |
22 | asdfsa | asdfsa | asdfsa |
23 | asdfsa | asdfsa | asdfsa |
24 | asdfsa | asdfsa | asdfsa |
25 | asdfsa | asdfsa | asdfsa |
26 | asdfsa | asdfsa | asdfsa |
27 | asdfsa | asdfsa | asdfsa |
28 | asdfsa | asdfsa | asdfsa |
29 | asdfsa | asdfsa | asdfsa |
30 | asdfsa | asdfsa | asdfsa |
31 | asdfsa | asdfsa | asdfsa |
32 | asdfsa | asdfsa | asdfsa |
33 | asdfsa | asdfsa | asdfsa |
34 | asdfsa | asdfsa | asdfsa |
35 | asdfsa | asdfsa | asdfsa |
36 | asdfsa | asdfsa | asdfsa |
37 | asdfsa | asdfsa | asdfsa |
38 | asdfsa | asdfsa | asdfsa |
39 | asdfsa | asdfsa | asdfsa |
40 | asdfsa | asdfsa | asdfsa |
41 | asdfsa | asdfsa | asdfsa |
42 | asdfsa | asdfsa | asdfsa |
43 | asdfsa | asdfsa | asdfsa |
44 | asdfsa | asdfsa | asdfsa |
45 | asdfsa | asdfsa | asdfsa |
46 | asdfsa | asdfsa | asdfsa |
47 | asdfsa | asdfsa | asdfsa |
48 | asdfsa | asdfsa | asdfsa |
49 | asdfsa | asdfsa | asdfsa |
50 | asdfsa | asdfsa | asdfsa |
51 | asdfsa | asdfsa | asdfsa |
52 | asdfsa | asdfsa | asdfsa |
53 | asdfsa | asdfsa | asdfsa |
54 | asdfsa | asdfsa | asdfsa |
55 | asdfsa | asdfsa | asdfsa |
56 | asdfsa | asdfsa | asdfsa |
57 | asdfsa | asdfsa | asdfsa |
58 | asdfsa | asdfsa | asdfsa |
59 | asdfsa | asdfsa | asdfsa |
60 | asdfsa | asdfsa | asdfsa |
61 | asdfsa | asdfsa | asdfsa |
62 | asdfsa | asdfsa | asdfsa |
63 | asdfsa | asdfsa | asdfsa |
64 | asdfsa | asdfsa | asdfsa |
65 | asdfsa | asdfsa | asdfsa |
66 | asdfsa | asdfsa | asdfsa |
67 | asdfsa | asdfsa | asdfsa |
68 | asdfsa | asdfsa | asdfsa |
69 | asdfsa | asdfsa | asdfsa |
70 | asdfsa | asdfsa | asdfsa |
71 | asdfsa | asdfsa | asdfsa |
72 | asdfsa | asdfsa | asdfsa |
73 | asdfsa | asdfsa | asdfsa |
74 | asdfsa | asdfsa | asdfsa |
75 | asdfsa | asdfsa | asdfsa |
76 | asdfsa | asdfsa | asdfsa |
77 | asdfsa | asdfsa | asdfsa |
78 | asdfsa | asdfsa | asdfsa |
79 | asdfsa | asdfsa | asdfsa |
80 | asdfsa | asdfsa | asdfsa |
81 | asdfsa | asdfsa | asdfsa |
82 | asdfsa | asdfsa | asdfsa |
83 | asdfsa | asdfsa | asdfsa |
84 | asdfsa | asdfsa | asdfsa |
85 | asdfsa | asdfsa | asdfsa |
86 | asdfsa | asdfsa | asdfsa |
87 | asdfsa | asdfsa | asdfsa |
88 | asdfsa | asdfsa | asdfsa |
89 | asdfsa | asdfsa | asdfsa |
90 | asdfsa | asdfsa | asdfsa |
91 | asdfsa | asdfsa | asdfsa |
92 | asdfsa | asdfsa | asdfsa |
93 | asdfsa | asdfsa | asdfsa |
94 | asdfsa | asdfsa | asdfsa |
95 | asdfsa | asdfsa | asdfsa |
96 | asdfsa | asdfsa | asdfsa |
97 | asdfsa | asdfsa | asdfsa |
98 | asdfsa | asdfsa | asdfsa |
99 | asdfsa | asdfsa | asdfsa |
100 | asdfsa | asdfsa | asdfsa |
101 | asdfsa | asdfsa | asdfsa |
102 | asdfsa | asdfsa | asdfsa |
103 | asdfsa | asdfsa | asdfsa |
104 | asdfsa | asdfsa | asdfsa |
105 | asdfsa | asdfsa | asdfsa |
106 | asdfsa | asdfsa | asdfsa |
107 | asdfsa | asdfsa | asdfsa |
108 | asdfsa | asdfsa | asdfsa |
109 | asdfsa | asdfsa | asdfsa |
110 | asdfsa | asdfsa | asdfsa |
111 | asdfsa | asdfsa | asdfsa |
112 | asdfsa | asdfsa | asdfsa |
113 | asdfsa | asdfsa | asdfsa |
114 | asdfsa | asdfsa | asdfsa |
115 | asdfsa | asdfsa | asdfsa |
116 | asdfsa | asdfsa | asdfsa |
117 | asdfsa | asdfsa | asdfsa |
118 | asdfsa | asdfsa | asdfsa |
119 | asdfsa | asdfsa | asdfsa |
120 | asdfsa | asdfsa | asdfsa |
121 | asdfsa | asdfsa | asdfsa |
122 | asdfsa | asdfsa | asdfsa |
123 | asdfsa | asdfsa | asdfsa |
124 | asdfsa | asdfsa | asdfsa |
125 | asdfsa | asdfsa | asdfsa |
126 | asdfsa | asdfsa | asdfsa |
127 | asdfsa | asdfsa | asdfsa |
128 | asdfsa | asdfsa | asdfsa |
129 | asdfsa | asdfsa | asdfsa |
130 | asdfsa | asdfsa | asdfsa |
131 | asdfsa | asdfsa | asdfsa |
132 | asdfsa | asdfsa | asdfsa |
133 | asdfsa | asdfsa | asdfsa |
134 | asdfsa | asdfsa | asdfsa |
135 | asdfsa | asdfsa | asdfsa |
136 | asdfsa | asdfsa | asdfsa |
137 | asdfsa | asdfsa | asdfsa |
138 | asdfsa | asdfsa | asdfsa |
139 | asdfsa | asdfsa | asdfsa |
140 | asdfsa | asdfsa | asdfsa |
141 | asdfsa | asdfsa | asdfsa |
142 | asdfsa | asdfsa | asdfsa |
143 | asdfsa | asdfsa | asdfsa |
144 | asdfsa | asdfsa | asdfsa |
145 | asdfsa | asdfsa | asdfsa |
146 | asdfsa | asdfsa | asdfsa |
147 | asdfsa | asdfsa | asdfsa |
148 | asdfsa | asdfsa | asdfsa |
149 | asdfsa | asdfsa | asdfsa |
150 | asdfsa | asdfsa | asdfsa |
151 | asdfsa | asdfsa | asdfsa |
152 | asdfsa | asdfsa | asdfsa |
153 | asdfsa | asdfsa | asdfsa |
154 | asdfsa | asdfsa | asdfsa |
155 | asdfsa | asdfsa | asdfsa |
156 | asdfsa | asdfsa | asdfsa |
157 | asdfsa | asdfsa | asdfsa |
158 | asdfsa | asdfsa | asdfsa |
159 | asdfsa | asdfsa | asdfsa |
160 | asdfsa | asdfsa | asdfsa |
161 | asdfsa | asdfsa | asdfsa |
162 | asdfsa | asdfsa | asdfsa |
163 | asdfsa | asdfsa | asdfsa |
164 | asdfsa | asdfsa | asdfsa |
165 | asdfsa | asdfsa | asdfsa |
166 | asdfsa | asdfsa | asdfsa |
167 | asdfsa | asdfsa | asdfsa |
168 | asdfsa | asdfsa | asdfsa |
169 | asdfsa | asdfsa | asdfsa |
170 | asdfsa | asdfsa | asdfsa |
171 | asdfsa | asdfsa | asdfsa |
172 | asdfsa | asdfsa | asdfsa |
173 | asdfsa | asdfsa | asdfsa |
174 | asdfsa | asdfsa | asdfsa |
175 | asdfsa | asdfsa | asdfsa |
176 | asdfsa | asdfsa | asdfsa |
177 | asdfsa | asdfsa | asdfsa |
178 | asdfsa | asdfsa | asdfsa |
179 | asdfsa | asdfsa | asdfsa |
180 | asdfsa | asdfsa | asdfsa |
181 | asdfsa | asdfsa | asdfsa |
182 | asdfsa | asdfsa | asdfsa |
183 | asdfsa | asdfsa | asdfsa |
184 | asdfsa | asdfsa | asdfsa |
185 | asdfsa | asdfsa | asdfsa |
186 | asdfsa | asdfsa | asdfsa |
187 | asdfsa | asdfsa | asdfsa |
188 | asdfsa | asdfsa | asdfsa |
189 | asdfsa | asdfsa | asdfsa |
190 | asdfsa | asdfsa | asdfsa |
191 | asdfsa | asdfsa | asdfsa |
192 | asdfsa | asdfsa | asdfsa |
193 | asdfsa | asdfsa | asdfsa |
194 | asdfsa | asdfsa | asdfsa |
195 | asdfsa | asdfsa | asdfsa |
196 | asdfsa | asdfsa | asdfsa |
197 | asdfsa | asdfsa | asdfsa |
198 | asdfsa | asdfsa | asdfsa |
199 | asdfsa | asdfsa | asdfsa |
200 | asdfsa | asdfsa | asdfsa |