移动端fiexd内的元素怎么才能滚动呢？

Question

如图
列表父元素是用的fixed定位的，但是里面的列表超出了，怎么才能让他可以滑动呢？

<div class="commonClass" v-show="showCityList">
            <div class="" v-for="item in city_list" @click="getNewList(item.id)">{{item.name}}</div>
</div>

.commonClass{
  width: 100%;
  position: fixed;
  top: 90px;
  height: 100%;
  background: #fff;
  overflow: scroll;
  bottom: 0;
}

Answer 1

CSS overflow 了解一下

https://developer.mozilla.org...

---

这样设置应该是可以滚动的，题主的问题是为什么“山东”下面截掉了吧。把height: 100%;删掉就好了。

height: 100%;并不会计算fix、margin之类的偏移，所以很可能直接用的是整个屏幕的高度，这样的话最下面90px实际上是被挤出屏幕了的。

既然用的是绝对定位，那同时设置top和bottom相当于设置了height，所以不需要再次设置了。