11.上中下左侧定宽.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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: 1600px;
  10. height: 880px;
  11. display: flex;
  12. flex-direction: column;
  13. border:3px solid #000;
  14. }
  15. #header {
  16. width: 100%;
  17. height: 100px;
  18. background: #f00;
  19. }
  20. #main {
  21. width: 100%;
  22. flex: 1;
  23. background: plum;
  24. display: flex;
  25. }
  26. #main .left {
  27. flex: 1;
  28. /* width: 280px; */
  29. height: 100%;
  30. background: #ff0;
  31. }
  32. #main .right {
  33. flex: 8;
  34. height: 100%;
  35. background: hotpink;
  36. margin-left: 20px;
  37. }
  38. #footer {
  39. width: 100%;
  40. height: 180px;
  41. background: #ccc;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="box">
  47. <div id="header"></div>
  48. <div id="main">
  49. <div class="left">
  50. </div>
  51. <div class="right">
  52. </div>
  53. </div>
  54. <div id="footer"></div>
  55. </div>
  56. </body>
  57. </html>