[分享]css不能y轴滚动条

在进行网页排版时，我们难免会遇到一些需要设置滚动条的情况，比如内容过多，需要进行纵向滚动。但是有时候，我们会发现在使用CSS样式进行页面设计时，设置了y轴滚动条，但是却无法出现。那么，为什么CSS不能...

在进行网页排版时，我们难免会遇到一些需要设置滚动条的情况，比如内容过多，需要进行纵向滚动。

但是有时候，我们会发现在使用CSS样式进行页面设计时，设置了y轴滚动条，但是却无法出现。

那么，为什么CSS不能设置y轴滚动条呢？

div{
  width: 200px;
  height: 200px;
  overflow-y: scroll;
} 

以上代码多数情况下是可以正常使用的，但是在一些特殊情况下，比如设置了容器的高度为100%时，滚动条就无法显示。

body{
  height:100%;
  margin:0;
  padding:0;
}
div{
  height:100%;
  overflow-y: scroll;
} 

造成这个问题的原因是，当设置height为100%时，容器的高度实际上是由父元素的高度决定的。但是body的高度并不能确定是多少，因此会造成y轴滚动条不出现。

解决这个问题的方法，可以通过设置html和body的高度为100%，或者使用flex、grid布局等方式来解决。

html, body{
  height: 100%;
  margin:0;
  padding:0;
}
div{
  height: 100%;
  overflow-y: scroll;
} 

总之，在进行页面设计时，我们需要时刻注意元素的层级和css的样式设置，以避免出现不必要的问题。