CSS实现固定侧边栏上下边距：顶部有留白但无法设置底部间距？

固定定位侧边栏底部留白失效的核心原因 #

你现在卡壳的本质是给固定定位的元素同时设置了height: 100%。
对于设置了position: fixed的元素，浏览器的定位优先级规则非常明确：

• 只要显式指定了height属性值，height的优先级就会高于bottom属性的定位约束；写bottom:14px也好，加margin-bottom:14px也好，都会被覆盖——元素会直接从top:14px的位置开始，往下撑满100%的视口高度，自然贴住视口底部，出不来留白效果。
• 给固定定位元素加margin-bottom更是完全没用：脱离文档流的固定定位元素不受普通文档流的布局规则约束，margin-bottom不会把元素整体往上推留出底部空隙，反而可能导致元素意外溢出视口。

可直接生效的实现方案 #

两种稳定兼容的写法，选任意一种都能实现上下14px的均匀留白：

• 纯定位撑开法（最简洁）
  直接删掉原来的height: 100%属性，放开注释里的bottom: 14px配置即可，修改后的CSS：

  .sidebar {
    position: fixed;
    top: 14px;
    left: 20px;
    bottom: 14px;
    width: 7.375rem;
    border-radius: 1.8125rem;
    background-color: blue;
    z-index: 100;
  }
  

  原理是：固定定位元素如果同时指定top和bottom偏移、不写显式高度，浏览器会自动计算元素实际高度 = 视口总高度 - 顶部偏移值 - 底部偏移值，天然实现上下等距留白，不需要手动算高度数值。
• calc高度计算法（适合需要显式指定高度的场景）
  如果项目逻辑必须保留固定高度的配置，就把原来的height:100%替换成视口单位配合calc的计算值：

  .sidebar {
    position: fixed;
    top: 14px;
    left: 20px;
    width: 7.375rem;
    /* 100vh是视口总高度，减去上下各14px的留白，总计扣28px */
    height: calc(100vh - 28px);
    border-radius: 1.8125rem;
    background-color: blue;
    z-index: 100;
  }
  

  这个写法不依赖bottom定位，直接精准计算出需要的侧边栏高度，完全不会出现定位属性冲突的问题，适配性更强。

内容的提问来源于stack exchange，提问作者kicikhaluk