CSS问题：设置100%高度后出现垂直滚动条的原因查询

这个问题我碰到过好多次，核心原因其实是图片的默认display属性是inline，而inline元素在排版时会遵循基线对齐规则，底部会预留一小段空间（用来容纳字母如g、y这类向下延伸的部分），这部分额外空间就是导致页面超出视口高度、出现滚动条的罪魁祸首。

你虽然给所有元素都设置了height: 100%，但inline状态下的图片会给容器（.container）带来额外的底部间距，使得.container的实际高度略大于100%视口高度，进而触发滚动条。

解决办法（任选其一即可） #

• 将图片改为块级元素：修改img的CSS，添加display: block，彻底消除inline元素的基线间隙：

  img { height: 100%; display: block; }
  

• 调整图片的垂直对齐方式：给img设置vertical-align属性，改变其对齐基准，同样能去掉底部空隙：

  img { height: 100%; vertical-align: top; /* 或middle、bottom都可以 */ }
  

• 清除容器的字体影响：给.container设置font-size: 0，因为inline元素的间隙大小和字体尺寸相关，设为0后间隙会消失（注意：如果容器内还有其他文本内容，这个方法会影响文本显示，需谨慎使用）：

  .container { height: 100%; font-size: 0; }
  

你可以试试上面的方法，滚动条应该就会消失了，而且不需要用overflow-y:hidden这种“治标不治本”的方式~

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