10.上中下布局.html 889 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #box {
  9. width: 1000px;
  10. height: 800px;
  11. border:3px solid #f00;
  12. display: flex;
  13. flex-direction: column;
  14. }
  15. #header {
  16. width: 100%;
  17. /* flex: 2; */
  18. height: 80px;
  19. background: #0f0;
  20. }
  21. #main {
  22. width: 100%;
  23. flex: 6;
  24. background: #00f;
  25. }
  26. #footer {
  27. width: 100%;
  28. flex: 2;
  29. background: #ccc;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="box">
  35. <div id="header">
  36. </div>
  37. <div id="main">
  38. </div>
  39. <div id="footer"></div>
  40. </div>
  41. </body>
  42. </html>