CSS如何实现border高度拉伸至父元素的完整高度？

你遇到的border-right高度不够的问题，是因为边框默认只会跟随当前元素的内容高度，下面是3种易实现的方案：

• 方案1：给图标父容器设置display: flex + align-items: stretch，再给搜索图标加右侧边框，此时元素高度会自动撑满父容器高度，边框自然和父容器等高
  示例代码：

  .header-right {
    display: flex;
    align-items: stretch; /* 子元素高度自动撑满父容器 */
  }
  .search-icon {
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center; /* 图标垂直居中 */
    padding: 0 12px;
  }
  .cart-icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  

• 方案2：用伪元素生成竖线，可自由控制竖线的高度和位置，不需要依赖元素本身的边框属性
  示例代码：

  .search-icon {
    position: relative;
    padding-right: 16px;
  }
  .search-icon::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px; /* 自定义竖线高度 */
    width: 1px;
    background-color: #e5e5e5;
  }
  

• 方案3：直接在两个图标中间插入一个单独的竖线分隔元素，自定义宽高和间距，灵活性最高
  示例代码：

  <div class="header-right">
    <div class="search-icon"></div>
    <span class="divider"></span>
    <div class="cart-icon"></div>
  </div>
  

  .divider {
    width: 1px;
    height: 20px;
    background-color: #e5e5e5;
    margin: 0 12px;
    align-self: center;
  }
  

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