OLD | NEW |
---|---|
(Empty) | |
1 <!doctype HTML> | |
ojan
2013/04/11 03:21:46
Nit: We typically do <!DOCTYPE html> since that's
cbiesinger
2013/04/12 01:17:52
Fixed - I think I copied that from some other file
| |
2 <style> | |
3 body * { | |
4 border: 2px solid red; | |
5 padding: 5px; | |
6 clear: both; | |
7 } | |
8 | |
9 .container { | |
10 height: 300px; | |
11 border-color: blue; | |
12 | |
13 display: inline-block; | |
14 width: 100px; | |
15 } | |
16 | |
17 .fill-available { | |
18 height: 100%; | |
19 box-sizing: border-box; | |
20 } | |
21 </style> | |
22 <div class="container"> | |
23 <div> | |
24 height: min-content<br>on this box. | |
25 </div> | |
26 | |
27 <div> | |
28 height: max-content<br>on this box. | |
29 </div> | |
30 | |
31 <div> | |
32 height: fit-content<br>on this box. | |
33 </div> | |
34 </div> | |
35 | |
36 <div class="container"> | |
37 <div class="fill-available"> | |
38 height: fill-available<br> on this box. | |
39 </div> | |
40 </div> | |
41 | |
42 <div class="container"> | |
43 <div> | |
44 min-height: min-content<br>on this box. | |
45 </div> | |
46 | |
47 <div> | |
48 min-height: max-content<br>on this box. | |
49 </div> | |
50 | |
51 <div> | |
52 min-height: fit-content<br>on this box. | |
53 </div> | |
54 </div> | |
55 | |
56 <div class="container"> | |
57 <div class="fill-available"> | |
58 min-height: fill-available<br> on this box. | |
59 </div> | |
60 </div> | |
61 | |
62 <div class="container"> | |
63 <div> | |
64 max-height: min-content<br>on this box. | |
65 </div> | |
66 | |
67 <div> | |
68 max-height: max-content<br>on this box. | |
69 </div> | |
70 | |
71 <div> | |
72 max-height: fit-content<br>on this box. | |
73 </div> | |
74 </div> | |
75 | |
76 <div class="container"> | |
77 <div class="fill-available"> | |
78 max-height: fill-available<br> on this box. | |
79 </div> | |
80 </div> | |
OLD | NEW |