13.上中下布局顶部固定.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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: 1400px;
  10. height: 1300px;
  11. display: flex;
  12. flex-direction: column;
  13. }
  14. .con {
  15. width: 1400px;
  16. height: 100px;
  17. }
  18. .top {
  19. width: 1400px;
  20. height: 100px;
  21. position: fixed;
  22. top: 0;
  23. background: #f00;
  24. }
  25. .mid {
  26. width: 100%;
  27. flex: 1;
  28. background: #ff0;
  29. /* margin-top: 100px; */
  30. }
  31. .bottom {
  32. width: 100%;
  33. height: 140px;
  34. background: #0f0;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id="box">
  40. <div class="con">
  41. <div class="top">
  42. </div>
  43. </div>
  44. <div class="mid">
  45. </div>
  46. <div class="bottom"></div>
  47. </div>
  48. </body>
  49. </html>