CSS Grid与Flexbox开发头部时列表项hover无法占满全高如何解决

问题原因 #

1. 父容器.head-container设置了padding: 15px 100px，上下15px的内边距属于容器的外部留白，内部子元素哪怕高度设为100%也无法覆盖这块区域
2. 你给.social ul设置了align-items: center，Flex子项会垂直居中而非拉伸占满容器高度
3. 社交图标的父元素li和a都是默认的内容高度，没有设置占满父级高度，所以hover背景只能覆盖内容本身的高度

修复方案 #

修改以下几处CSS即可实现预期效果：

/* 1. 移除.head-container的上下padding，只保留左右padding，避免留白无法被背景覆盖 */
.head-container {
  padding: 0 100px;
  background-color: #9e0b0b;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
}

/* 2. 去掉.head-info的上下padding，新增align-items: stretch让Grid子项自动拉伸占满高度 */
.head-container .head-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  padding: 0 5px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

/* 3. 给contact的ul设置高度100%+垂直居中，保证联系方式文字位置和原来一致 */
.head-container .head-info .contact ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 4. 把.social ul的align-items改成stretch，让所有li拉伸占满容器高度 */
.head-container .head-info .social ul {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  text-align: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

/* 5. 给li和a设置占满高度，同时让a内部的图标垂直居中 */
.head-container .head-info .social ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.head-container .head-info .social ul li a {
  margin: 0 5px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 8px;
}

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