记录一个固定定位的特殊操作

首先看看效果，布局是上下布局，上面定高，下面高度自适应。中间浅色内容是定宽的。左侧蓝色部分是固定栏。

想要达到的效果是：

  • 左侧蓝色部分是固定栏。 无论页面 宽度 高度 怎么改变，蓝色固定栏都会在中间内容部分的左侧，并且高度是居中的

屏幕录制2021-06-18 .gif

直接看代码，特殊的部分会用注释写上去

主要思路还是用 position:fixed;

  • 需要解决的问题是：fixed是 相对于屏幕视口（viewport）的位置来指定元素位置。我们可以用父级设置display: flex; 把fixed改成相对父级定位
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     html,
  8.     body {
  9.       padding: 0;
  10.       margin: 0;
  11.       height: 100%;
  12.     }
  13.     #app {
  14.       height: 100%;
  15.     }
  16.     header {
  17.       height: 50px;
  18.       background: #aaa
  19.     }
  20.     .content {
  21.       height: calc(100% - 50px);
  22.       overflow: auto;
  23.       display: flex;
  24.       justify-content: center;
  25.     }
  26.     .route {
  27.       width: 300px;
  28.       background: #ccc
  29.     }
  30.     .fix {
  31.       position: fixed;
  32.       height: calc(100% - 60px);
  33.     }
  34.     .fix-child {
  35.       height: 100%;
  36.       display: flex;
  37.       align-items: center;
  38.       position: absolute;
  39.       right: 160px;
  40.     }
  41.   </style>
  42. </head>
  43. <body>
  44.   <div id='app'>
  45.     <header></header>
  46.     <div class="content">
  47.       <div class="route">
  48.         111
  49.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  50.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  51.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  52.         1234234324322
  53.       </div>
  54.       <div class="fix"><!-- .fix 会设置position:fixed(由于被父级的display:flex;给控制了).fix会居中定位，而不是相对视口定位 -->
  55.         <div class="fix-child">
  56.           <div style="height: 130px; width: 30px; background: lightblue;">固定栏</div>
  57.         </div>
  58.       </div>
  59.     </div>
  60.   </div>
  61. </body>
  62. </html>

其他方法

监听浏览器size变化，而 实时计算

  • （定位用普通的 子绝父相）
  1. window.onresize = function() {
  2.     ...
  3. }