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 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>가변 레이아웃</title> <style> body { margin: 0; } header { position: absolute; top: 0; left: 0; right: 0; height: 100px; background-color: orange; } article { position: absolute; top: 100px; bottom: 50px; left: 0; right: 200px; overflow: auto; background-color: green; } aside { position: absolute; top: 100px; bottom: 50px; right: 0; width: 200px; overflow: auto; background-color: pink; } footer { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background-color: skyblue; } </style> </head> <body> <header>Header</header> <div> <article>Article</article> <aside>Aside</aside> </div> <footer>Footer</footer> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] table-cell div 수직 수평 정렬 (0) | 2015.01.28 |
|---|---|
| [CSS] user-select:none 텍스트 드레그 막기 (0) | 2015.01.23 |
| [CSS] 음수 margin을 이용한 div 수직, 수평 정렬 (0) | 2015.01.07 |
| [CSS] ::after 가상선택자 배경이미지넣기 (0) | 2015.01.05 |
| [CSS] table td 텍스트 넘침 ... 표시 (0) | 2015.01.01 |
